Vuex 學習6 核心概念Module

**教程來自vuex官網：和技術胖教程

模組組一般不用再專案較小的情況

由於使用單一狀態數，醫用的所有狀態都會幾種到乙個比較大的物件。當應用變得非常複雜時，store 物件就有可能變得相當臃腫。

為了解決以上問題，vuex 允許我們將 store 分割成模組（module）。每個模組擁有自己的 state、mutation、action、getter，甚至是巢狀子模組——從上至下進行同樣方式的分隔：

const modulea =
,    mutations:
,    actions:
,    getters:};
const moduleb =
,    mutations:
,    actions:,}
;const store =
newvuex.store(}
);store.state.a // -> modulea 的狀態
store.state.b // -> moduleb 的狀態

對於模組內部的 mutation 和 getter，接受的第乙個引數是模組的區域性狀態物件。

const modulea =
,    mutations:},
getters:
}}

同樣，對於模組內部的 action，區域性狀態通過context.state暴露出來，根節點狀態則為context.rootstate：

const modulea =)}
}}

對於模組內部的 getter，根節點狀態會作為第三個引數暴露出來：

const modulea =
}}

預設情況下，模組內部的 action、mutation 和 getter 是註冊在全域性命名空間的——這樣使得多個模組能夠對同一 mutation 或 action 做出響應。

如果你希望你的模組具有更高的封裝度和復用性，你可以通過新增namespaced: ture的方式使其成為帶命名空間的模組。當模組被註冊後，它的所有 getter、action 及 mutation 都會自動根據模組註冊的路徑調整命名。例如：

const store =
newvuex.store(,
getters:
// -> getters['account/isadmin']},
actions:
// -> dispatch('account/login')},
mutations:
// -> commit('account/login')}}
,// 巢狀模組
modules:
,                getters:
// -> getters['account/profile']}}
,// 進一步巢狀命名空間
posts:
,                getters:
// -> getters['accout/posts/popular']}}
}}})

啟動了命名空間的 getter 和 action 會收到區域性化的getter，dispatch和commit。換言之，你在使用模組內容（module assets）時不需要在同一模組內部額外新增命名空間字首。更改namespaced屬性後不需要修改模組內的**。

如果你希望使用全域性 state 和 getter，rootstate和rootgetters會作為第三和第四引數傳入 getter，也會通過context物件的屬性傳入 action。

如需要在全域性命名空間分發 action 或提交 mutation，將作為第三引數傳給dispatch或commit即可。

modules:
,            someohtergetter.state =>},
actions:))
;//-> 'someotheraction'
commit
('somemutation');
// -> 'foo/somemutation'
commit
('somemutation'
,null,)
;// -> 'somemutation'},
someotheraction
(ctx, payload),}
}}

如需要在帶命名空間的模組註冊全域性 action，你可以新增root: ture，並將這個 action 的定義放在函式handler中。例如：

)}
,    modules:}}
}}}

當使用mapstate，mapgetters，mapaction和mapmutations這些函式來繫結帶命名空間的模組時，寫起來可能比較繁瑣：

)}
,    methods:
}

對於這種情況，你可以將模組的空間名稱字串作為第乙個引數傳遞給上述函式，這樣所有繫結都會自動將該模組作為上下文。於是上面的例子可以簡化為：

computed:)}
,methods:

在 store 建立之後，你可以使用store.registermodule方法註冊模組：

// 註冊模組 'mymodule'
store.
registermodule
('mymodule',)
// 註冊巢狀模組 `nested/mymodule`
store.
registermodule([
'nested'
,'mymodule'],
)

之後就可以通過store.state.mymodule和store.state.nested.mymodule訪問模組的狀態。

模組動態註冊功能使得其他 vue 外掛程式可以通過在 store 附加新模組的方式來使用 vuex 狀態管理。例如，vuex-router-sync外掛程式就是通過動態註冊模組將 vue-router 和 vuex 結合在一起，實現應用的狀態管理。

你也可以使用store.unregistermodule(modulename)來動態解除安裝模組。這一，你不能使用此方法寫在靜態模組（即建立 store 宣告時的模組）。

在註冊乙個新的 module 是，你很有可能想保留過去的 state，例如從乙個服務端渲染的應用保留 state。你可以通過perservestate選項將其歸檔：stote.registermodule('a', module, )。

當你設定preservestate: true時，該模組會被註冊，action、mutation 和 getter 會被新增到 store 中，但是 state 不會。這裡假設 store 的 state 已經包含了這個 module 的 state 並且你不希望將其覆寫。

有時我們可能需要建立乙個模組的多個例項，例如：

如果我們使用乙個純物件來宣告模組的狀態，那麼這個狀態物件會通過引用被共享，導致狀態物件被修改時 store 或模組間資料互相汙染的問題。

實際上這和 vue 元件內的data是同樣的問題。因此解決辦法也是相同的——使用乙個函式來宣告模組狀態（僅 2.3.0+ 支援）：

const myreusablemodule =},
// mutation, action 和 getter 等等...
}

Vuex 學習6 核心概念Module

Vuex 學習3 核心概念Getter

Vuex核心概念Mutation Action

Vuex的核心概念

Vuex 學習6 核心概念Module

Vuex 學習3 核心概念Getter

Vuex核心概念Mutation Action

Vuex的核心概念

相關推薦