>[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)