Vuex数据持久化存储

vuex数据在刷新的时候会初始化,之前的数据就拿不到了,我们怎么解决呢?

解决:把数据持久化存储(state中的数据做一个持久化存储)

1、我们可以使用localStorage进行存储

存在localStorage的话,数据不会因为页面或浏览器的关闭而初始化,只有我们手动在浏览器中进行清除

在Vuex初始化的时候我们就先用localStorage里面读取之前的数据,并存储在state中(下面我们写一个案例来看一下会更加清晰一点)

1、首先我们可以在 state中进行localStorage对数据进行存储,然后在mutations下有一个修改方法。

Vuex数据持久化存储_第1张图片

2、我们绑定一个方法进行加一操作

Vuex数据持久化存储_第2张图片

 2、使用插件进行持久化存储(vuex-persist)

安装:
        npm install vuex-persist -s

引入:

import VuexPersistence from "vuex-persist"

创建持久化存储对象;


var vueLocal=new VuexPersistence({
  // storage 存储方式  默认的是localStorage存储,可以修改成会话存储(window.sessionStorage)
  storage:window.localStorage
})

还是在state中定义数据,在mutations中修改方法,最后我们使用一下这个插件

Vuex数据持久化存储_第3张图片

 然后绑定一个方法演示一下

 Vuex数据持久化存储_第4张图片

你可能感兴趣的:(vuex,vue,前端,vue)