vuex的modules和辅助函数

一、回顾：vuex状态管理器

1、版本问题：vue2对应的是vuex3；vue3对应的vuex4

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

1. • 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、命名空间：

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

（2）若想让store有更好的封装性和复用性、在使用不会产生歧义，可以在store定义时加入 namespaced：true配置，当模块注册

后，所有的state、mutation、action、getter都会根据模块注册的路径调整命名

三、vuex中的辅助函数（四大函数/map写法）

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

//基础写法：
count(){
    return this.$store.state.cout
}
//简化写法
...mapState(['count'])

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

//基础写法
getAge() {
      return this.$store.getters.getAge  
    }
//简化写法
...mapGetters([''])

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

//基础写法
    handlerAdd(){ //同步加1：触发mutations中的addCount方法
      this.$store.commit('addCount',{ num: 1 })
    },
    handlerSub(){ //同步减1：触发mutations中的subCount方法
      this.$store.commit('subCount',{ num: 1 })
    }
//简化写法
...mapMutations({
      handlerAdd: 'addCount',
      handlerSub: 'subCount'
   }),
//html中直接传参的写法
<button @click="handlerAdd({num:1})">同步加1</button>
<button @click="handlerSub({num:1})">同步减1</button>

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

//基础写法
handlerAddAsyn(){ //异步加1：触发actions中addCountAsyn方法
      this.$store.dispatch('addCountAsyn')
    },
handlerSubAsyn(){ //异步减1：触发actions中subCountAsyn方法
      this.$store.dispatch('subCountAsyn')
    }

//简化写法
...mapActions({
      handlerAddAsyn: 'addCountAsyn',
      handlerSubAsyn: 'subCountAsyn'
    })