【vuex的modules和辅助函数】一.回顾：vuex状态管理器；二.vuex中的模块化（modules）和命名空间（namespaced）；三.vuex中的辅助函数（四大函数/map函数）

目录

一.回顾：vuex状态管理器

1.版本问题：vue2对应vuex3，vue3对应vuex4

2.vuex作用：每个vuex中都有一个Store（仓库），用于管理vue项目中用到的状态变量（属性）。vuex维护的是一个单一的状态树。

3.vuex的五大属性：

4.vuex的工作流程

二.vuex中的模块化（modules）和命名空间（namespaced）

1.vuex模块化的原因：vuex维护的是一个单一的状态树，对于复杂的vue项目，若只有一个store，则该store 就会非常臃肿难以维护。为了解决这个问题，vuex允许在vue项目中将store进行模块化的处理，即可以将一个大的store分解成若干个小的store，每个store都有自己的state、mutation、action、getter

2.命名空间：

（1）在默认情况下，模块内部的state、mutation、action、getter是全局的，即所有组件都可以使用

（2）若想让store有更好的封装性和复用性、在使用不会产生歧义，可以在所以tore定义时加入namespaced：true配置，当模块注册后，所有的state、mutation、action、getter都会根据模块注册的路径调整命名

三.vuex中的辅助函数（四大函数/map函数）

1.        ...mapState：用于解构state中状态属性

2.        ...mapGetters：用于解构getters中定义的方法

3.        ...mapMutations：用于解构mutations中的方法，注意传参：在调用时直接传参

4.        ...mapActions：用于解构actions中的方法

---

一.回顾：vuex状态管理器

1.版本问题：vue2对应vuex3，vue3对应vuex4

2.vuex作用：每个vuex中都有一个Store（仓库），用于管理vue项目中用到的状态变量（属性）。vuex维护的是一个单一的状态树。

3.vuex的五大属性：

const store = new Vuex.Store({
    state:{},    //定义vue项目中使用的状态变量
    getters:{},    //用于获取state中状态变量的值，类似于计算属性
    mutations:{},    //用于修改state中变量的值。只能是同步代码
    actions:{},    //通过commit方法提交修改state的请求给mutations间接实现对state的修改。可以放异步代码（axios）
    modules:{}    //配置多个子模块的store
})
export default store

强调：

（1）除了state之外，其他属性都是复数

（2）任何时候组件都不能直接修改state，只能通过mutation去修改

4.vuex的工作流程

View ---》 Actions ---》 Mutations ---》 state ---》 Getters ---》 View

二.vuex中的模块化（modules）和命名空间（namespaced）

1.vuex模块化的原因：vuex维护的是一个单一的状态树，对于复杂的vue项目，若只有一个store，则该store 就会非常臃肿难以维护。为了解决这个问题，vuex允许在vue项目中将store进行模块化的处理，即可以将一个大的store分解成若干个小的store，每个store都有自己的state、mutation、action、getter

2.命名空间：