vuex持久化存储插件vuex-persistedstate

在vue项目中我们经常使用vuex作为全局状态管理工具，但是在项目中会出现当我们刷新页面的时候，存储在vuex的state中的数据会重置为初始值，有时候这是我们所不期待的。

vuex-persistedstate插件可以解决这个问题

安装vuex-persistedstate

npm install vuex-persistedstate --save

在项目中使用

没有modules的情况

在store/index.js文件中引入及配置如下

import createPersistedState from "vuex-persistedstate"
const store =newVuex.Store({
　　state: {
　　　　count: 1
　　},
　　mutations: {},
　　actions: {},
　　plugins: [createPersistedState()] 
})

有modules的情况：

import Vue from 'vue'
import Vuex from 'vuex'
import tab from './tab.js'
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex)

export default new Vuex.Store({
    modules:{
        tab
    },
    plugins:[
        createPersistedState(),
    ]
})

vuex-persistedstate默认会把所有state都保存到localStorage之中，如果我们想要部分持久化，可以借助path参数。

举例：给tab模块的state中的menu做一个持久化

import Vue from 'vue'
import Vuex from 'vuex'
import tab from './tab.js'
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex)

export default new Vuex.Store({
    modules:{
        tab
    },
    plugins:[
        createPersistedState({
            paths:['tab.menu']
        }),
    ]
})