大家都知道在使用vuex时有一个弊端就是，就是一旦页面刷新，所有之前存储的状态就全部没了，这是因为js代码运行在内存中，代码运行时所有的变量和函数都是保存在内存中的，刷新的时候以前申请的内存将会被释放，并且js脚本会被重新加载，变量重新赋值。所以在我们使用vuex的时候只要一刷新数据就没了。如果我们想要持久化保存数据可以使用 localStorage 或者sessionStorage 存储在本地，保证刷新后数据不会丢失。
但我们也可以使用插件实现刷新后数据不丢失
在这里我推荐使用这两个插件vuex-persistedstate和vuex-persist

第一种，安装vuex-persistedstate：

npm install vuex-persistedstate -S

详情可见github：https://github.com/robinvdvleuten/vuex-persistedstate

1.vuex-persistedstate默认存储到localStorage，使用如下：
在store文件夹下面的index.js中引入

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex)
const store = new Vuex.Store({
	plugins: [createPersistedState()],
	modules: {}
})

2.使用vuex-persistedstate存储到sessionStorage，如下：

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex)
const store = new Vuex.Store({
	plugins: [createPersistedState({
		storage: window.sessionStorage
	})],
	modules: {}
})

3.使用vuex-persistedstate指定需要持久化的state数据，如下：

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex)
const store = new Vuex.Store({
	modules: {},
    plugins: [createPersistedState({
        storage: window.sessionStorage,
		// 方法1：用reducer，这里的val是由store里面的所有state，不加reducer为储存所有，reducer为指定存储
        reducer(val)  {
            return {
                // 只储存state中的name
                keyName: val.name
            }
        }
		// 方法2：用paths,数组里面填模块名，存储指定模块
		// paths: ['Home', 'Order']
    })]
})

第二种 引入vuex-persist 插件，它是为 Vuex 持久化存储而生的一个插件。不需要你手动存取数据 ，而是直接将状态保存至 cookie 或者 localStorage 中
首先安装vuex-persist
详情见这里：https://github.com/championswimmer/vuex-persist

npm install vuex-persist -S

在store文件夹下面的index.js中引入

import Vue from 'vue'
import Vuex from 'vuex'
import VuexPersistence from 'vuex-persist'
Vue.use(Vuex)

const dataPersistence = new VuexPersistence({
    storage: window.localStorage
})
const store = new Vuex.Store({
	modules: {},
    plugins: [dataPersistence.plugin]
})

通过以上设置，在各个页面之间跳转，如果刷新某个页面，数据并不会丢失，依然存在，并且不需要在每个 mutations 中手动存取数据