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核心原理解析。