VUE全家桶之vuex的使用

暴走的snail發表於2019-03-27
Vue

前言

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

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

VUEX 基本使用方式

圖1

圖2

  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
複製程式碼
  1. 獲取狀態值/改變狀態值/非同步改變狀態

VUE全家桶之vuex的使用

    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新建資料夾和檔案

VUE全家桶之vuex的使用
左側紅框內的目錄結構， store/actions、store/mutations為根actions和mutations定義的檔案 store/moudles/* 每個module定義的檔案

  1. 定義根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
複製程式碼

VUE全家桶之vuex的使用
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核心原理解析。

相關文章