就像官网所说的 vuex 就是一个用来做状态管理的库,它就像一个仓库一样存了许多的状态和方法
哪个组件使用,我们就直接在那个组件中引用就行.
在vuex中,有state,getters,mutations,actions,modules这些属性
state,类似于组件中的data,用来存放数据
getters,类似于组件中的computed
mutations,类似于组件中的methods
actions,提交mutions的
modules,把以上4个属性进行细分,让仓库更好的管理
当然,说归说,我们还是要看一下在实际中怎么进行使用
先安装一下:
npm install vuex@next --save
先创建一个文件夹
基本配置
在vue2中
这样 我们就完成了基本的一个配置
在vue3中
我们需要先在main.js中将store.js导入进来 并 挂载
这样 我们也完成了基本的一个配置
接下来,进行使用.先从state开始:
不论vue2和vue3
state相当于组件的data
我们直接在这里写一个str
然后 导入 并 使用
效果:
然后,看一下getters
不论vue2和vue3
这个getters就类似于computed计算属性 所以我们就会发现这个1也只是打印了一次
导入并使用
效果
接下来mutations
不论vue2和vue3
mutations就相当于组件的methods
导入组件中 使用
效果
接下来Actions
不论vue2和vue3
在组件中导入并使用
结果
到这里 我们就发现 一个问题,感觉mutations和这个Actions好像 都是一个方法然后 也都能实现 同样的功能 除了 参数有点不一样以外
那么这两个到底有什么区别??
我们可以引入异步 再来进行操作一下
mutations:
效果
我们发现 使用mutations 中的方法 在异步操作的时候 视图更新了 而 这个数据却没有变化
当我们换成Actions
使用Actions将mutations这个里面的方法commit出去 以后 我们这个 视图 和数据就同步更新了
也就解决了异步的需求
最后,我们看一下modules
不论vue2和vue3
假设 一个 这样的场景 我们有一个 项目 有50以上的state
这样的话 我们应该怎么去管理这个东西
都写在这一个 页面 会感到 比较复杂 难以区分
这时候 就有了 modules
我们创建两个单独的文件
cate.js中
path.js中
然后 统一导入到store.js中
然后 我们想要在组件中使用cate.js和path.js中的数据时
效果:
ok 这样就把所有的 Vuex的属性给做完了 基本上的使用 就这样
然后,来看一下 持久化存储
持久化存储的话,有两个实现方式
一个是自己手动localStorage
另一个就是使用vuex-persist等插件