Vuex 用例淺析

管理數據狀態的一個庫

安裝 npm install vuex --save
複製代碼

#main.js注入
import store from './store'
new Vue({
    el: '#app',
    router,
    store, // 注入Store 
    components: { App },
    template: '<App/>'
})
複製代碼

項目結構

store ---- index.js
      ---- state.js
      ---- getters.js
      ---- mutations.js
      ---- mutationTypes.js
      ---- action.js
      ---- module
        |---- notification.js
複製代碼

index.js

import Vue from 'vue'
import Vuex from  ‘vuex' // 引入模塊 import state from './state' import getters from './getters' import mutations from './mutations' import actions from './actions' import notification from './module/notification’
// 全局使用
Vue.use(Vuex)
// 曝光
export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions,
    modules: {
        notification
    }
})
複製代碼

State 初始化全局變量

#state.js
const state = {
    user: null,
    folderAll: null
}
export default state
複製代碼

Getter 對變量進行初步篩選或變形

#getters.js
const getters = {
    userRole: state => state.user && state.user.userType
}
export default getters
複製代碼

getter 屬性另命名

mapGetters({
  // 把 `this.role` 映射爲`this.$store.getters.userRole`
  role: 'userRole'
})
複製代碼

Mutation 事件類型

1.更改 store 中的狀態的惟一方法是提交 mutation
2.限制：mutation 必須同步執行
3.每個 mutation 都是一個字符串 事件類型 和 回調函數

#mutations.js
import * as MutationTypes from './mutationTypes'
const mutations = {
    [MutationTypes.SET_USER]: (state, payload) => {
        state.user = payload
    },
    [MutationTypes.SET_FOLDER]: (state, payload) => {
        state.folderAll = payload
    }
}
export default mutations
複製代碼

mutationTypes.js 使用常量代替mutation事件類型

export const SET_USER = 'SET_USER'
export const SET_FOLDER = 'SET_FOLDER'
複製代碼

Actions 異步操做

Action 相似 mutation
1.Action 提交的是 mutation ，而不是直接變動狀態
2.Action 能夠包含任意異步操做

#actions.js
import * as MutationTypes from './mutationTypes'
const actions = {
    fetchUser: async({ commit }, payload) => {
        try {
            const res = await apis.user.fetchUser(payload)
            commit(MutationTypes.SET_USER, res.data)
            return Promise.resolve(res)
        } catch (err) {
            return Promise.reject(err)
        }
    }
}
export default actions
複製代碼

當payload爲多個參數時，用{}包裹起來

Module 將 store 分割成模塊

#notification.js
const state = {}
const getters = {}
const mutations = {}
const actions = {}

export default {
  state,
  getters,
  mutations,
  actions
}
複製代碼

子組件引用

this.$store.state.user
this.$store.getters.userRole
this.$store.commit(MutationTypes.SET_USER, res.data)
this.$store.dispatch('fetchUser', data)
複製代碼

當子組件須要獲取多個狀態時，便捷的操做

import { mapState, mapGetters, mapActions, mapMutations } from ‘vuex' computed: { ...mapState([ 'user', 'folderAll']), ...mapGetters({ userRole: 'userRole' }) }, methods: { ...mapMutations({ setUserInfo: MutationTypes.SET_USER }), ...mapActions(['fetchUser', 'login', 'orgLogin']), } 複製代碼

識別…須要安裝插件babel-preset-stage-2

npm install babel-preset-stage-2 --save-dev
複製代碼

#.babelrc
{
    "presets": [
        ["env", { "modules": false }],
        ["stage-2"]
    ]
}
複製代碼