时间戳

首页 > 解决方案 > Vuex 在刷新后持久丢失数据

typescript - Vuex 在刷新后持久丢失数据

问题描述

我想保存一些在页面重新加载后需要持久保存的数据。我偶然发现了 Vuex。我设法让它在一个纯 Javascript 的项目中工作，但由于某种原因，我没有让它在 TypeScript 中工作。刷新后，数据使用默认值，而不是在页面刷新之前分配的数据。

import Vue from 'vue'
import Vuex from 'vuex'
import VuexPersistence from 'vuex-persist'
import LanguageEntry from '../classes/LanguageEntry'

Vue.use(Vuex)

export interface State {
  IsDark: boolean;
  CurrentLanuage: string;
  LanguageValues: Array<LanguageEntry>;
}

export default new Vuex.Store<State>({
  state: {
    IsDark: false,
    CurrentLanuage: "DE",
    LanguageValues: Array<LanguageEntry>(),
  },
  plugins: [new VuexPersistence().plugin],
})

标签： typescriptvuejs2vuex

解决方案

我使用一个流行的插件在刷新后保留数据vuex-persistedstate，我今天注意到它最近比你的更新。

我在 /route index.js 中使用它，例如：

import createPersistedState from 'vuex-persistedstate';

export default function (/* { ssrContext } */) {
  const store = new Vuex.Store({
    modules: {
      // example
    clients,
    auth: authentication,
    },
  plugins: [createPersistedState()],
    // enable strict mode (adds overhead!)
    // for dev mode only
    strict: process.env.DEBUGGING
  })

  return store
}

推荐阅读