Vuex之module的使用

module一般我们用来以功能为单位拆分模块，使模块具有更高的封装度和复用性
每个模块都拥有自己的state、mutation、action、getter
根节点的状态为context.rootState
简单使用
新建一个module
import { createStore } from "vuex"

const muduleA = {
    state: () => {
        return {
            personNum: 0
        }
    },
    mutations: (state) => {
        state.personNum++;
    }
}

// 创建一个新的 store 实例
const store = createStore({
    state() {
        return {
            seyHello: "Hello World"
        };
    },
    modules: {
        muduleA
    }
});

export default store
 
代码的简单解释
一个module其实就是一个对象，对象里面含有vuex的state、mutation、action、getter
写完的配置，我们最终要在createStore的modules下引入
在组件中的使用
<script>
import { mapMutations, mapState } from 'vuex';

export default {
    methods: mapMutations(["increment"]),
    computed:mapState({
        person: state => state.muduleA.personNum
    })
}
</script>

<template>
    <p>personNum:{{ person }}</p>
    <button @click="increment">changeNum</button>
</template>
 
对于代码的解释
在组件中，我们取module下的状态就会发现是state.muduleA.personNum
但是我们会发现我们取module的时候，相关的mutation的取法并没有加上muduleA之类的写法，这会导致当我们其他模块有同名的mutation的时候会导致混淆，我们会用命名空间来解决这个问题
命名空间
注册module
import { createStore } from "vuex"

const muduleA = {
    namespaced: true,
    state: () => {
        return {
            personNum: 0
        }
    },
    mutations: {
        increment: state => {
            state.personNum++;
        }
    }
}

// 创建一个新的 store 实例
const store = createStore({
    state() {
        return {
            seyHello: "Hello World"
        };
    },
    modules: {
        muduleA
    }
});

export default store
 
我们会发现如果想要是用命名空间，那么，只需要在相关的module的对象下，加一个namespace:true就可以了
使用
<script>
import { mapMutations, mapState } from 'vuex';

export default {
    methods: mapMutations({
        increment: "muduleA/increment"
    }),
    computed: mapState({
        person: state => state.muduleA.personNum
    })
}
</script>

<template>
    <p>personNum:{{ person }}</p>
    <button @click="increment">changeNum</button>
</template>
 
添加了命名空间主要是我们在使用的时候就应该加上了命名空间的名字increment: "muduleA/increment"
嵌套的module
当然我们的module也可以嵌套，子的module如果没有命名空间的话，会继承父的命名空间

const store = createStore({
  modules: {
    account: {
      namespaced: true,

      // 模块内容（module assets）
      state: () => ({ ... }), // 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响
      // 嵌套模块
      modules: {
        // 继承父模块的命名空间
        myPage: {
            ...
        },
        // 进一步嵌套命名空间
        posts: {
          namespaced: true,
          ...
        }
      }
    }
  }
})

文章知识点与官方知识档案匹配，可进一步学习相关知识
————————————————
版权声明：本文为CSDN博主「youhebuke225」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/youhebuke225/article/details/125366410