在vue2和vue3中Vuex的使用及其持久化存储,mutation和actions的区别

就像官网所说的  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等插件