目录

一,为什么需要状态管理

二,vuex逻辑

三,使用

四,store与自己定义对象共享区别

五,state单一状态树

在options中使用

 在setup中使用

六,getters使用

七,mutation使用

八,action使用

九,modules使用

---

一,为什么需要状态管理

当我们项目非常大时,需要管理的状态很多,且状态之间相互依赖,难以控制与跟踪

vuex通过定义和隔离状态管理中的各个状态,并通过强制性的规则来维护视图和状态间的独立性

二,vuex逻辑

三,使用

安装

npm i vuex

src下创建store文件夹,index文件

 在main.js安装

 在其他组件使用

四,store与自己定义对象共享区别

store是响应式的

store必须通过mutations使用

五,state单一状态树

vuex使用单一状态树有好有坏吧,失去了灵活性,但易于维护

在options中使用

 使用映射函数,mapstate函数返回一个对象,对象的值是一个个函数

 在setup中使用

 在setup中使用mapstate映射函数(不好用)

 在setup中推荐用法(直接解构state)

六,getters使用

类似计算属性

 使用

 返回函数

 利用映射函数mapGetters

 在setup中使用与state一样

单独使用某一个值,可以这样写

七,mutation使用

 不要在mutation中异步操作

 options中使用

 映射函数mapMutations使用

 在setup中使用还需要bind绑定,太麻烦

不使用映射函数,手动commit

const increment = store.commit("increment")

八,action使用

提交mutation修改state,

可以包含异步操作

 options使用

mapActions使用

setup中使用与mapMutation一样,这里不推荐

建议默认做法

const actionfn = ()=>store.dispath()

action是异步的,组件如何知道异步结束了呢?

async定义函数一定返回promise

或者手动返回promise

组件中.then

九,modules使用

项目太大时,按模块划分,易维护

新建其他文件

 只有组件获取state中数据时,需要带上模块名称(其他相当于合并到rootstate中)

在模块中可以获取rootstate