Vue3—14—VueX

 

一、vuex就是状态管理

vuex五大核心：

• state
• getters
• mutations
• actions
• modules

state即状态，其实我们的数据就是一种状态；

 

 

 

 

 

 

 

 

 

二、vuex的使用

 

 

 

 

 

 

 

 

 

 

 

 三、单一状态树和获取vuex的状态

使用单一状态树，即创建一个state实例，不要创建多个state；

 

 

三种方式：

1. 直接在template组件模板中通过调用￥store获取
2. 在optionApi中比如computed通过调用this.$store.sate获取
3. 在compositionApi中使用setup（）中使用

 

 

 

 

 

 

 

 

 四、getters

getters就像计算属性一样，不用加括号就可以取值了；

但如果取返回值是一个函数而不是普通的变量，可以＋一个括号（），来执行这个函数；

 

第二个参数是getters本身，传了这个参数，就可以在本函数中调用getters的其他函数；

 

 

 

但如果取返回值是一个函数而不是普通的变量，可以＋一个括号（），来执行这个函数；

 

 

 

辅助函数去映射

 

 

 

 

 

 

 

五、mutations使用

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation

mutations自动会传入state

 有两种方式提交（触发）mutations

 

 2. 使用【】来获取常量，动态定义函数；

 

 

 3.mapMutations辅助函数，来跟更快的获取vuex的mutation

 

 

 

 

六、actions

1.actions的参数context和payload

会自动传入一个context，这个是和store实例一样的东西；

context和store的区别在于，

在module中，给actions传入一个context对象作为参数，它里面是由rootState、rootGetters这两个属性的，而store是没有的；

 也支持第二个参数payload，这个时候要调用的时候传入一个对象；

2.组件使用vuex的mutation叫提交，使用vuex的actions叫分发

 

3.actions的异步操作

返回一个new promise（）对象

 

 

 4.actions的辅助函数

 

 

 

 

 

 

七、module

 

 2.模块内部的局部状态和根状态

但是getters和actions也可以接受一个参数为rootState；

 

 

 3.模块自己的空间

模块的所有状态都会被注册在根空间，所有需要开启属性namespaced开启自己命名空间；

 

 4.module的actions可以传很多参数

在模块中，通过actions修改根模块的rootState、rootGetters，通过actions调用rootMutatios、rootActionss

 

 5.module的辅助函数

 

 

 

 当然这些都是optionApi，如果是compositionApi应该怎么写？

官方没有提供compositionApi的写法，所以需要自定义；