Vuex数据持久化存储

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

解决：把数据持久化存储（state中的数据做一个持久化存储）

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

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

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

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

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

<template>
  <div class="home">
    {{$store.state.count}}
    <!-- 绑定一个方法 -->
    <button @click="$store.commit('setCount')">加一</button>
  </div>
</template>

 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中修改方法，最后我们使用一下这个插件

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