目录

一.回顾：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.命名空间：

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

（2）若想让store有更好的封装性和复用性、在使用不会产生歧义，可以在所以tore定义时加入

namespaced：true

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

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

1.

…mapState

：用于解构state中状态属性

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

2.

…mapGetters

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

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

3.

…mapMutations

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

//基础写法（同步）
<button @click="handlerAddCount()">同步加2</button>
<button @click="handlerSubCount()">同步减2</button>


handlerAddCount(){
    this.$store.commit('addCount',{num:2})
},
handlerSubCount(){
    this.$store.commit('subCount',{num:2})
}
//简化写法：
<button @click="handlerAddCount({num:2})">同步加2</button>
<button @click="handlerSubCount({num:2})">同步减2</button>


...mapMutations({
    handlerAddCount:'addCount',
    handlerSubCount:'subCount'
})

4.

…mapActions

：用于解构actions中的方法

//基础写法（异步）：
<button @click="handlerAddCountAsync()">异步加2</button>
<button @click="handlerSubCountAsync()">异步减2</button>
    
handlerAddCountAsync(){
    this.$store.dispatch('addCountAsync')
},
handlerSubCountAsync(){
    this.$store.dispatch('subCountAsync')
}
//简化写法（异步）：
<button @click="add">异步加2</button>
<button @click="sub">异步减2</button>

...mapActions({
    add:'addCountAsync',
    sub:'subCountAsync'
})