vuex数据持久化

289 阅读1分钟

请观赏

import Vue from "vue"
import Vuex from "vuex"
import createPersistedState from 'vuex-persistedstate'
import *as Cookies from 'js-cookie'
Vue.use(Vuex)
const types={
    SET_IS_AUTNENTIATED:'SET_IS_AUTNENTIATED',
    SET_USER:'SET_USER'
}
const store  =new Vuex.Store({
    state:{
        isAutnenticated:false,  //false存储的是token的状态,有效true 无效false
        user:{}  //存储用户信息
    },
    getters:{
        isAutnenticated(state){
            return state.isAutnenticated;
        },
        user(state){
            return state.user;
        }
    },
    mutations:{
        [types.SET_IS_AUTNENTIATED](state,isAutnenticated){
            if(isAutnenticated){
                state.isAutnenticated = isAutnenticated
            }else{
                state.isAutnenticated=false;
            }
            
        },
        [types.SET_USER](state,user){
            if(user){
                state.user = user
            }else{
                state.user={};
            }
            
        }
    },
    actions:{
        setIsAutnenticated({commit},val){
            commit(types.SET_IS_AUTNENTIATED,val)
        },
        setUser({commit},val){
            commit(types.SET_USER,val)
        },
        clearCurrentState:({commit})=>{
            commit(types.SET_IS_AUTNENTIATED,false);
            commit(types.SET_USER,null)
        }
    },
    
     //数据持久保存
    plugins:[createPersistedState({
        key:"1906", //本地缓存的key名称
        storage:window.sessionStorage,//缓存形式
        reducer(state){  //只缓存state中的list
            return {
                list:state.list
            }
        }
    })]
    //用js-cookie数据持久保存
    // plugins[createPersistedState({
    //     key:"1606",
    //     storage:{
    //         getItem: key => Cookies.get(key),
    //         setItem: (key,value) => Cookies.set(key,value, {expires: 7 }),
    //         removeItem: key => Cookies.remove(key)
    //     }
    // })]
})
export default store;