实现Vuex数据持久化

当我们在使用Vuex的时候会遇到刷新或者页面跳转后，Vuex储存的数据会重置的问题，所以我们需要对Vuex的数据进行持久化处理。

一、通过vuex-persist实现数据持久化

1.安装

yarn add vuex-persist

2.使用

import Vue from 'vue'
import Vuex from 'vuex'
import num from './store_module/num'
import VuexPersistence from 'vuex-persist'

Vue.use(Vuex)

const dataPersistence = new VuexPersistence({
  storage: window.localStorage
})

//单一数据数，一个对象包含了全部的应用层级状态。
export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    num
  },
  plugins: [dataPersistence.plugin]
})

注：直接将状态保存至 cookie 或者 localStorage 。