namespaced - iT 邦幫忙 | vuex rootgetters
今天要介紹的是modules內的namespaced。前一章有提到我要去取得其他module的state及getters我們要使用rootState及rootGetters,那如果我要使用其他module裡面的mutation及actions呢?!這時我們就需要在module裡面加上namespaced囉,使用namespaced也能夠提高module的封裝度和複用性,所有getter、action及mutation都會自動根據module註冊的路徑調整命名。這樣說可能很抽象,下面就用範例來解說唄~namespaced沿用前一章的範例,我想要從cart去呼叫product的mutations及actions的話該如何執行,如下:如上面所說,我將module內設定nam...
今天要介紹的是 modules 內的 namespaced。
前一章有提到我要去取得其他 module 的 state 及 getters 我們要使用 rootState 及 rootGetters,那如果我要使用其他 module 裡面的 mutation 及 actions 呢?!
這時我們就需要在 module 裡面加上 namespaced 囉,使用 namespaced 也能夠提高 module 的封裝度和複用性,所有 getter 、 action 及 mutation 都會自動根據 module 註冊的路徑調整命名。
這樣說可能很抽象,下面就用範例來解說唄~
namespaced沿用前一章的範例,我想要從 cart 去呼叫 product 的 mutations 及 actions 的話該如何執行,如下:
如上面所說,我將 module 內設定 namespaced: true,這樣就能呼叫其他 module 的 actions 及 mutations
const cart = { namespaced: true, state: { cartList: [] }, actions: { getList({commit, dispath, state, getters, rootState, rootGetters}) { commit(product/setList, payload, {root: true}) //commit 及 dispath 沒有提供像 rootstate 及 rootGetters 的方法 //所以使用 namespaced 時在最後面加上 root: true //來讓這個 actions 可以呼叫其他的 mutations 及 actions } } } const product = { namespaced: tru...