vuex-persistedstate 在 sessionStorage 和 localStorage 之间切换答案

【问题标题】：vuex-persistedstate switch between sessionStorage and localStoragevuex-persistedstate 在 sessionStorage 和 localStorage 之间切换
【发布时间】：2021-11-17 18:52:51
【问题描述】：

如果用户选中“记住我”复选框，我想从 sessionStorage 切换到 localStorage，我也使用 vuex-persistedstate

export default store(function (/* { ssrContext } */) {
  const Store = createStore({
    state: {
    },
    actions: {
      setLodingMode({ commit }, newMode) {
        commit("SET_LOADING_MODE", newMode);
      },
      resetStates({ commit }) {
        commit("AUTHENTICATION_RESET_STATE");
        commit("login/RESET_STATE");
      },
    },
    modules: { login, authentication },
    plugins: [createPersistedState()],
  });

  return Store;
});

重点就在这里，我想改成这样

state: {
      flag: false
        },
plugins: [
      createPersistedState({
        storage: flag ? window.localStorage : window.sessionStorage,
      }),
    ],

我希望用户在登录时更改“记住我”复选框的标志，因此当用户选择复选框时，标志更改为 true，并且所有数据都保存在 localStorage 上

【问题讨论】：

嗨！这个社区互相帮助调试他们对某些源代码的尝试。你可能想在论坛上问这个问题。 “请为我编写代码”在这里并不常见以引起注意。如果您有尝试的源代码，请与我们分享。
正如 Peter Krebs 所说，请努力展示一些东西。对于您的问题，最好的方法是为自己实现一个带有真/假标志的myOwnStorage。如果为真，则保存在localStorage，如果为假，则保存在sessionStorage。
我更新了@PeterKrebs
我这样做了，但没有更新@Patfreeze
vuex-persistedstate 不特别支持这种开关，您可以在文档中看到。您需要自定义存储来实现您的逻辑，请参阅github.com/robinvdvleuten/vuex-persistedstate#customize-storage。 “我做到了，但没有更新” - 不是真的，你在只执行一次的地方放置了一个条件。

标签： vue.js vue-component vuex

【解决方案1】：

作为@Estus Flask 的评论，我使用了自定义存储，并通过直接调用 localStorage 并在 localStorage 中设置标志来管理“记住我”选项

plugins: [
      createPersistedState({
        paths: ["authentication.userAuthenticationInfo"],
        storage: {
          getItem(key) {
            if (localStorage.getItem("rememberMe") == 1) {
              return localStorage.getItem(key);
            } else {
              return Cookies.get(key);
              //return sessionStorage.getItem(key);
            }
          },
          setItem(key, value) {
            if (localStorage.getItem("rememberMe") == 1) {
              localStorage.setItem(key, value);
            } else {
              Cookies.set(key, value);
              //sessionStorage.setItem(key, value);
            }
          },
          removeItem(key) {
            if (localStorage.getItem("rememberMe") == 1) {
              localStorage.removeItem(key);
            } else {
              Cookies.remove(key);
              //sessionStorage.removeItem(key);
            }
          },
        },
      }),
    ],

我会在每次注销或 401 响应时清除 localStorage

【讨论】：