Vuex プラグイン vuex-persistedstate データ永続ストレージ

1.プラグインをインストールする

yarn add vuex-persistedstate
// 或
npm install --save vuex-persistedstate

2.使い方

sessionStorageを使用して上記の状態のデータをキャッシュし、キー名はstoreです

import Vue from 'vue'
import Vuex from 'vuex'
// 引入插件
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex)

const state = {};
const mutations = {};
const actions = {};

const store = new Vuex.Store({
	state,
	mutations,
	actions,
    /* vuex数据持久化配置 */
	plugins: [
		createPersistedState({
            // 存储方式：localStorage、sessionStorage、cookies  默认: localStorage
			storage: window.sessionStorage,
            // 存储的 key 的key值
			key: "store",
			render(state) {
                // 要存储的数据：本项目采用es6扩展运算符的方式存储了state中所有的数据
				return { ...state };
			}
		})
	]
});

export default store;

3.Stateの下にいくつかのデータをキャッシュします

import Vue from 'vue'
import Vuex from 'vuex'
// 引入插件
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex)

const state = () => {
    return {
        token: '',
        uid: ''
    }
}



const store = new Vuex.Store({
    // ...
    plugins: [createPersistedState({
        storage: window.sessionStorage,
        reducer(val) {  // val就是上面的state
            return {
                // 只储存state中的token，而不会缓存uid
                token: val.token
            }
        }
    })]
})

4. 指定したモジュールの状態を Vuex の複数のモジュールにキャッシュし、パス構成を変更することで実現する

/* user-module */
export const user = {
    state: {
        token: '',
        role: ''
    }
}
/* profile-module */
export const profile = {
    state: {
        name: '',
        company: ''
    }
}
/* modules目录下的index.js */
import user from './user'
import profile from './profile'
export default {
    user,
    profile
}
/* store.js */
import modules from './modules'
let store = new Vuex.Store({
    modules,
    plugins: [
        createPersistedState({
            key: 'zdao',
            paths: ['user'] // 这里便只会缓存user下的state值
        })
    ]
})