VUE全家桶之vuex的使用

前言

在vue項目中，如果我們涉及到兄弟組件間的傳值（及多個組件共享一個狀態）。遇到這種情況使用vuex來解決是目前比較流行的解決方案。雖然在vuex官方文檔中詳細介紹了vuex的使用方法，但是文檔中的內容太過細節，初次閱讀不易抓住重點。本篇文章根據自身使用vuex的經驗來精簡的說明下vuex的使用，希望內能夠給初次使用vuex的小夥伴提供些幫助，也希望熟悉這塊的道友如發現文章不到之處給出指正。

注：本文介紹兩種使用vuex的方式，一種適用於簡單並且共享狀態較少的情況，一種適用於複雜並且狀態較多的情況。

VUEX 基本使用方式

1. 新建個store.js文件，main.js中引入並且添加到vue中。（如圖1）
2. 定義狀態和改變狀態的mutations

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
      count: 0
    },
    mutations: {
      increment (state) {
        state.count++
      }
    },
    actions:{
        setCount: ({ commit }, count) => {
            commit('SET_COUNT', count)
          },
    }
  })

 export default store

3. 獲取狀態值/改變狀態值/異步改變狀態

    let count = this.$store.state.count//獲取狀態的值
    this.$store.commit('increment')//mutations改變狀態
    this.$store.dispatch('setCount')//actions改變狀態(異步執行的)

VUEX module使用方式

由於使用單一狀態樹，應用的所有狀態會集中到一個比較大的對象。當應用變得非常複雜時，store 對象就有可能變得相當臃腫爲了解決以上問題，Vuex 允許我們將 store 分割成模塊 （module）。每個模塊擁有自己的 state、mutation、action、 甚至是嵌套 子模塊——從上至下進行同樣方式的分割（引用官方文檔的一句話）：

1. 根據所需modules新建文件夾和文件

左側紅框內的目錄結構， store/actions、store/mutations爲根actions和mutations定義的文件
store/moudles/* 每個module定義的文件

2. 定義根state以及modules的相關屬性

import Vue from 'vue'
import Vuex from 'vuex'

import app from './modules/app'
import user from './modules/user'
import mutations from './mutations'
import actions from './actions'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    app,
    user
  },
  //根狀態 
  state: {
    menus:[],
  },
  mutations:mutations,
  actions: actions,
})

/modules/user.js中的定義。（每個module中都可以定義自己的state mutations actions getters）

const user = {
    state:{
        userInfo:{}
    },
    mutations:{
        SET_USER_INFO: (state, userInfo) => {
            state.userInfo = []
            state.userInfo = userInfo
          },
    },
    actions:{},
    getters:{},
}
export default user

3. 獲取狀態值/改變狀態值/異步改變狀態
根目錄的state值獲取改變以及異步state改變同VUEX 基本使用方式中的使用方式。
module中的state值(store.state.moduleName)獲取改變以及異步state改變:

this.$store.state.user.userInfo
this.$store.commit("SET_USER_INFO")

當我們定義兩個模塊中有相同的mutation屬性是此時commit會同時改變這兩個模塊。此時我們應該如何處理呢？

1. mutation屬性命名是加上模塊名前綴如：SET_USER_*(多人開發時必須強制規範)，此種方法雖然簡單，但如果團隊中出現不按規範來的人時就會出現很大問題。
2. vuex給出了定義命名空間的解決方法：

const user = {
    namespaced: true,//成爲帶命名空間的模塊
    state:{
        userInfo:{}
    },
    mutations:{
        SET_INFO: (state, userInfo) => {
            state.userInfo = []
            state.userInfo = userInfo
          },
    },
    actions:{},
    getters:{},
}
export default user

如果模塊namespaced被設置爲true name 當模塊被註冊後，它的所有 getter、action 及 mutation 都會自動根據模塊註冊的路徑調整命名。意思就是此時所有的屬性名都會自動改變成
"ModuleName/*"及模塊名/屬性名
這兩種方式，我們項目中使用的是第二種因爲這個項目的小夥伴是首次合作，人爲控制變量名容易出現問題。

其他

VUEX中爲了方便我們開發還提供了輔助函數mapState mapGetters mapActions mapMutations ,如果有興趣的小夥伴可以去官方文檔學習下。另外如果有對vuex源碼感興趣的小夥伴可以去參考下我的另一篇文章vue全家桶之vuex核心原理解析。