iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 29
0
Modern Web

菜菜菜的 Vue 30天系列 第 29

Vuex(modules)

菜菜菜的 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 的部分就有點不太一樣了,多了 rootStaterootGetters 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,裡面有 commitdispathstategetters

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

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

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


上一篇
Vuex(actions)
下一篇
vuex(namespaced)
系列文
菜菜菜的 Vue 30天30

尚未有邦友留言

立即登入留言