菜菜菜的 Vue 30天 - Day29

前面幾章介紹了 Vuex 的 state, getters, mutations 以及 actions 的用法。

modules

但隨著專案的規模越來越大之後，我們的功能越來越多 store 內的東西也越來越多，像是也會越來越不好管理，所以我們就能使用 Vuex 所提供的方式 modules 來依據功能或是需求來拆分不同的 modules，這樣就能夠比較明確的區分使用的情境，也比較好做維護。

那 modules 要如何使用呢，下面就來介紹一下～

先假設一個情境，我們的專案已經開始越來越多功能，但是沒有拆分 modules 的情況像下面這樣：

const store = new Vuex.Store({
  state: {
    userInfo: '',
    userList: [],
    productList: '',
    cart: []
    .
    .
    .
    .
  },
  getters: {
    .
    .
    .
    .
    .
    .
    
  },
  mutations: {
    .
    .
    .
    .
    .
    .
    .
  },
  actions: {
    .
    .
    .
    .
    .
    .
    .
  }
})

專案開始肥大，但是所有的資料都在同一個地方，或許會造成管理上的困難。

接下來我們就使用 modules 依據功能拆分 store 裡面的東西吧。

我們可以先定義 module 它是一個物件，我們就能將原本 store 裡的東西整理過去，如下：

const user = {
    state: {
        userInfo: '',
        userList: []
    },
    getters: {
        .
        .
        .
    },
    mutations: {
        .
        .
        .
    },
    actions: {
        .
        .
    }
}

接下來就把我們定義好的 module 放進 store 裡的 modules 裡：

const store = new Vuex.Store({
  modules: {
      user: user,
      cart: cart,
      product: product
          .
          .
          .
          .
          .
  }
})

接下來來介紹一下改成 modules 會有什麼地方不一樣，就拿上面的程式繼續延伸。

mutations

先來說一下 mutations，mutations 就跟原本的一樣吃 2 個參數 state 以及 payload

const user = {
    state: {
        userInfo: '',
        userList: []
    },
    mutations: {
        XXXX(state, payload) {   //這邊的 state 是指 user 裡面的 state
            .
            .
        }
    }
}

getters

getters 的部分就有點不太一樣了，多了 rootState 及 rootGetters 2 個參數。

state 及 getters 一樣指的是 user 裡面的 state 及 getters

rootState 及 rootGetters 指的是 store 裡面的 state 及 getters，也就是全域的。

如果我要取得其他 module(例如：product) 的 state 就用以下方式：

const user = {
    state: {
        userInfo: '',
        userList: []
    },
    getters: {
        XXXX(state, getters, rootState, rootGetters) {
            return rootState.product.productList
        }
    }
}

actions

最後 actions 的部分，之前有介紹帶入的參數是 context，裡面有 commit、dispath、state 及 getters。

那使用 modules 之後呢跟 getters 一樣可以使用rootState 及 rootGetters 這 2 個參數去取得全域的資料。

const user = {
    state: {
        userInfo: '',
        userList: []
    },
    actions: {
        XXXX({commit, dispath, state, getters, rootState, rootGetters}) {
            .
            .
            .
            .
        }
    }
}

以上是使用 modules 的基本用法，下一章會介紹 namespace 的部分囉～