使用vuex-persistedstate时如何根据记住我选项切换sessionStorage与localStorage

你原先的写法不生效的核心原因是：createPersistedState 插件在store实例初始化时就会固定读取storage配置，后续state中flag的变化不会主动触发存储类型切换，需要通过自定义存取逻辑实现动态判断。

步骤1：调整store配置 #

修改你的store代码如下：

export default store(function (/* { ssrContext } */) {
  // 初始化时优先从存储中读取是否记住我的状态
  const getRememberMe = () => {
    return localStorage.getItem('remember_me') === 'true' || sessionStorage.getItem('remember_me') === 'true'
  }
  const Store = createStore({
    state: {
      rememberMe: getRememberMe()
    },
    mutations: {
      SET_REMEMBER_ME(state, val) {
        state.rememberMe = val
        // 把记住我状态同步到存储，避免刷新丢失
        if (val) {
          localStorage.setItem('remember_me', 'true')
          sessionStorage.removeItem('remember_me')
        } else {
          sessionStorage.setItem('remember_me', 'true')
          localStorage.removeItem('remember_me')
        }
      }
    },
    actions: {
      setLodingMode({ commit }, newMode) {
        commit("SET_LOADING_MODE", newMode);
      },
      resetStates({ commit }) {
        commit("AUTHENTICATION_RESET_STATE");
        commit("login/RESET_STATE");
        // 登出时清除两边存储的记住我标记
        localStorage.removeItem('remember_me')
        sessionStorage.removeItem('remember_me')
      },
    },
    modules: { login, authentication },
    plugins: [
      createPersistedState({
        // 自定义存取逻辑，每次操作前动态判断存储类型
        storage: {
          getItem: (key) => {
            const storage = getRememberMe() ? window.localStorage : window.sessionStorage
            return storage.getItem(key)
          },
          setItem: (key, value) => {
            const storage = getRememberMe() ? window.localStorage : window.sessionStorage
            // 切换存储时清除旧存储的冗余数据，可根据需求选择是否保留
            if (getRememberMe()) sessionStorage.removeItem(key)
            else localStorage.removeItem(key)
            return storage.setItem(key, value)
          },
          removeItem: (key) => {
            const storage = getRememberMe() ? window.localStorage : window.sessionStorage
            return storage.removeItem(key)
          }
        }
      })
    ],
  });
  return Store;
});

步骤2：绑定登录页「记住我」复选框 #

在登录页组件中，监听复选框的change事件，提交mutation更新记住我状态即可：

// 登录页复选框change事件回调
handleRememberMeChange(checked) {
  this.$store.commit('SET_REMEMBER_ME', checked)
}

可选优化 #

如果需要在切换记住我状态时迁移已有持久化数据，可以在SET_REMEMBER_ME的mutation中增加逻辑，把旧存储里的vuex持久化数据迁移到新存储中，避免切换后状态丢失。

内容的提问来源于stack exchange，提问作者Muhammad Ehsan Mirzaei