Question

因此，我正在使用Vue，Node和Vuex进行项目。现在，我现在将用户数据存储在cookie中，而不是在vuex存储中。但是我遇到了一个问题，我需要实时更新用户数据，例如当他买东西时，我需要更新网页上的钱。鞠躬如何更改Cookie中的值？有没有一种更新cookie的方法，或者我应该为此使用vuex存储吗？

Answer 1

首选的方法是将状态保留在vuex中，并使用持久性插件来持久保留vuex状态的部分（或全部）。

例如，您可以使用vuex-persist。
它具有对localStorage，sessionStorage等的内置支持。
要将状态保存为Cookie，可以使用js-cookie：

import Vuex, { Store } from 'vuex';
import VuexPersistence from 'vuex-persist';
import Cookies from 'js-cookie';

const vuexCookie = new VuexPersistence({
  restoreState: (key, storage) => Cookies.getJSON(key),
  saveState: (key, state, storage) =>
    Cookies.set(key, state, {
      expires: 3
    }),
  modules: ['user'] // only save the user module state in the cookie
});

const store = new Store({
  modules: {
    user: {
      state: {name: "User 1"},
      // TODO: getters, mutations, etc...
    },
    // ... more modules
  },
  plugins: [vuexCookie.plugin]
});

（示例由 vuex-persist 的Detailed Example修改）

您可以为每个vuex模块指定自定义持久性策略，因此您可以为vuex状态的不同部分使用不同的持久性策略：

const vuexLocal = new VuexPersistence({
  storage: window.localStorage,
  reducer: (state) => ({ cache: state.cache }) //only save cache module
});
const vuexSession = new VuexPersistence({
  storage: window.sessionStorage,
  reducer: (state) => ({ user: state.user }) //only save user module
});

const store = new Vuex.Store({
  modules: {
    user: { /* ... */ }, // will be stored in sessionStorage
    cache: { /* ... */ }, // will be stored in localStorage
    foobar: { /* ... */ } // not persisted, will reset on page reload
  },
  plugins: [vuexLocal.plugin, vuexSession.plugin]
});

Vue CLI正在更新cookie或正在更新存储？

1 个答案: