目录
一,为什么需要状态管理
当我们项目非常大时,需要管理的状态很多,且状态之间相互依赖,难以控制与跟踪
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
版权声明：本文为yunbabac原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。