Vue使用vuex刷新页面后state数据丢失

使用 createPersistedState 做持久化

安装:npm install vuex-persistedstate --save

使用:

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate'
import navCollapse from './modules/navCollapse';
import user from './modules/user';
Vue.use(Vuex);

const store = new Vuex.Store({
    state:{},
    mutations:{},
    actions:{},
    getters:{},
    modules:{
        user,
        navCollapse,
    },
    plugins:[createPersistedState()]
})

export default store;

插件参数说明

createPersistedState配置:

createPersistedState({options}) 

options里面可以有:

key: String 存储到localStorage, sessionStorage 中对象的key,默认为vuex

local: Object 和 session: Object, 分别代表localStorage的配置和sessionStorage的配置

local 和 session 里面可以有: include: Array 和 exclude: Array

posted @ 2023-11-12 18:50  时光SHG  阅读(70)  评论(0编辑  收藏  举报