Vuex Store 数据在页面刷新后丢失的解决方法

# 使用 npm
npm install vuex-persistedstate
# 使用 yarn
yarn add vuex-persistedstate

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';
Vue.use(Vuex);
const store = new Vuex.Store({
  state: {
    // 定义状态
  },
  mutations: {
    // 定义突变
  },
  plugins: [
    createPersistedState()
  ]
});
export default store;

createPersistedState({
  key: 'my-app-store'
})

createPersistedState({
  paths: ['moduleA.stateItem1', 'moduleB']
})

createPersistedState({
  storage: window.sessionStorage
})
// 使用自定义存储对象
const customStorage = {
  getItem: (key) => { /* 获取项目 */ },
  setItem: (key, value) => { /* 设置项目 */ },
  removeItem: (key) => { /* 移除项目 */ }
};
createPersistedState({
  storage: customStorage
})

createPersistedState({
  getState: (key, storage) => {
    // 自定义获取逻辑
  },
  setState: (key, state, storage) => {
    // 自定义设置逻辑
  }
})

createPersistedState({
  reducer: (state) => {
    return {
      moduleA: state.moduleA,
      moduleB: {
        item1: state.moduleB.item1
      }
    }
  }
})

createPersistedState({
  filter: (mutation) => {
    return mutation.type === 'SOME_MUTATION'
  }
})

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';
Vue.use(Vuex);
const store = new Vuex.Store({
  state: {
    moduleA: {
      stateItem1: 'value1',
      stateItem2: 'value2'
    },
    moduleB: {
      item1: 'value3',
      item2: 'value4'
    }
  },
  mutations: {
    SOME_MUTATION(state, payload) {
      // 突变逻辑
    }
  },
  plugins: [
    createPersistedState({
      key: 'my-app-store',
      paths: ['moduleA.stateItem1', 'moduleB'],
      storage: window.sessionStorage,
      reducer: (state) => {
        return {
          moduleA: state.moduleA,
          moduleB: {
            item1: state.moduleB.item1
          }
        }
      },
      filter: (mutation) => {
        return mutation.type === 'SOME_MUTATION'
      }
    })
  ]
});
export default store;

const localStorage = ["token","permissions"];
const sessionStorage = ['userInfo'];
export default new Vuex.Store({
  plugins: [createPersistedState({
    storage: window.sessionStorage,
    paths: sessionStorage
  }), createPersistedState({
    storage: window.localStorage,
    paths: localStorage
  })],
  getters,
  state,
  mutations
})

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
    state: {
        user: JSON.parse(localStorage.getItem('user')) || null,
        token: localStorage.getItem('token') || null
    },
    mutations: {
        setUser(state, user) {
            state.user = user;
            localStorage.setItem('user', JSON.stringify(user));
        },
        setToken(state, token) {
            state.token = token;
            localStorage.setItem('token', token);
        }
    },
    actions: {
        login({ commit }, { user, token }) {
            commit('setUser', user);
            commit('setToken', token);
        }
    }
});
export default store;

npm install localforage

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
import localforage from 'localforage';
Vue.use(Vuex);
const store = new Vuex.Store({
    state: {
        user: null,
        token: null
    },
    mutations: {
        setUser(state, user) {
            state.user = user;
            localforage.setItem('user', user);
        },
        setToken(state, token) {
            state.token = token;
            localforage.setItem('token', token);
        }
    },
    actions: {
        login({ commit }, { user, token }) {
            commit('setUser', user);
            commit('setToken', token);
        },
        loadUser({ commit }) {
            localforage.getItem('user').then(user => {
                if (user) {
                    commit('setUser', user);
                }
            });
            localforage.getItem('token').then(token => {
                if (token) {
                    commit('setToken', token);
                }
            });
        }
    }
});
// 应用启动时加载用户数据
store.dispatch('loadUser');
export default store;