vuex--使用vuex-persistedstate持久化保存数据

• vuex默认情况下数据存储在内存，刷新浏览器后数据变成初始状态

• vuex-persistedstate可以让vuex中的数据持久保存在sessionstorage或localstorage中，刷新后不会变成初始状态

• 引入

npm i -S vuex-persistedstate

• 使用：

import Vue from 'vue'
import Vuex from 'vuex'
import persistedState from 'vuex-persistedstate'
export default new Vuex.Store({
    // ...
    plugins: [persistedState()]
})

• vuex-persistedstate默认使用localStorage来存储数据，如果要使用sessionStorage:

 plugins: [persistedState({ storage: window.sessionStorage })]

• 可以配置哪些state需要持久化存储，哪些还是存储在内存里

import Vue from 'vue'
import Vuex from 'vuex'
import persistedState from 'vuex-persistedstate'
Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        count: 1,
        count2: 1
    },
    getters: {
        getCount: function(state) {
            return state.count + 1;
        },
    },
    mutations: {
        add(state, n) {
            state.count = state.count + n;
        },


        add2(state, n) {
            state.count2 = state.count2 + n;
        },

    },
    actions: {
        addFun(context, n) {
            context.commit("add", n)
        },

        addFun2(context, n) {
            context.commit("add2", n)
        },

    },

    plugins: [persistedState({
        storage: window.sessionStorage,
        reducer(val) {
            return {
                count2: val.count2
            }
        }
    })]

})

export default store

上例中刷新后只保存count2的值，count会恢复到初始值
更改reducer里的state后（比如改成只存储count的值，不存储count2的值），会执行remove操作删除之前已经存储的count2的值
默认情况下，所有state数据都会持久化保存