>[success] # module 1. `Module`可以讓單一狀態樹拆分成多個模塊，每個模塊可以擁有**state、mutation、action、getter**甚至嵌套子模塊。 2. 在使用模塊里的數據時，可以通過`$store.模塊名.state`狀態屬性名的方式訪問 3. 在使用模塊里的方法時，可以通過`$store.commit('mutation方法名')`的方式提mutation 4. 當想要有更強的封裝性時，可以開啟命名空間，在導出的模塊對象里增加一個namespaced屬性為true，然后就可以在Vue中使用`mapState('模塊名', ['state狀態屬性名'])`的方式獲取到屬性名稱，使用`mapMutations ('模塊名', ['mutation方法名'])`的方式獲取到方法名`namespaced: true` 開啟模塊名 >[danger] ##### 案例 * 創建一個modules 對象 ~~~ export default { state: () => ({ name: "ww", }), mutations: { setName(state, name) { state.name = name; }, }, getters: { // rootState 獲取根數據 getterName(state, getters, rootState) { console.log(getters); console.log(rootState); return state.name; }, }, actions: { setNameAction(context, name) { context.commit("setName", name); }, }, }; ~~~ * 注冊module ~~~ // 創建vuex import { createStore } from "vuex"; import info from "./modules/info"; const store = createStore({ modules: { info, }, }); export default store; ~~~ * 使用 注意此時沒有開啟`namespaced` 因此只需要`state `指定`module `才能調用 ~~~html <template> <div> <!-- state 獲取必須加上 模塊名 --> {{ $store.state.info.name }} <!-- 除了state 其他可以不用 --> {{ $store.getters.getterName }} {{ name }} {{ getterName }} </div> <button @click="msetName">msetName</button> <button @click="asetName">asetName</button> </template> <script setup> import { useStore } from "vuex"; import { toRefs } from "vue"; const store = useStore(); const { name } = toRefs(store.state.info); const { getterName } = toRefs(store.getters); function msetName() { store.commit("setName", "m"); } function asetName() { store.dispatch("setNameAction", "a"); } </script> ~~~ >[danger] ##### 開啟namespaced ~~~ export default { namespaced: true, // 開啟 state: () => ({ name: "ww", }), mutations: { setName(state, name) { state.name = name; }, }, getters: { // rootState 獲取根數據 getterName(state, getters, rootState) { console.log(getters); console.log(rootState); return state.name; }, }, actions: { setNameAction(context, name) { context.commit("setName", name); }, }, }; ~~~ * 使用 **模塊/方法** 作為key ~~~html <template> <div> <!-- state 獲取必須加上 模塊名 --> {{ $store.state.info.name }} <!-- 使用 模塊/方法 作為key --> {{ $store.getters["info/getterName"] }} {{ name }} {{ getterName }} </div> <button @click="msetName">msetName</button> <button @click="asetName">asetName</button> </template> <script setup> import { useStore } from "vuex"; import { toRefs } from "vue"; const store = useStore(); const { name } = toRefs(store.state.info); const { getterName } = toRefs(store.getters); function msetName() { store.commit("info/setName", "m"); } function asetName() { store.dispatch("info/setNameAction", "a"); } </script> ~~~ >[info] ## 官網參考 [鏈接](https://vuex.vuejs.org/zh/guide/modules.html)