Persistent data in Vuex is lost upon refresh

Question

Persistent data in Vuex is lost upon refresh

Trying to persist data after a page reload can be tricky. I recently came across Vuex as a solution for this issue. While I successfully implemented it in a project using JavaScript, I've been facing difficulties with TypeScript. Despite assigning data before the page refresh, upon reloading, the default values are being used instead.

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],
})

typescript vuejs2 vuex

Answer 1

Answer №1

I recently updated a popular plugin called vuex-persistedstate to persist data after refreshing, and I noticed that it has been updated more recently than the one you are using.

In my /route index.js file, I implement it like this:

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
}

Answer 2

I recently updated a popular plugin called vuex-persistedstate to persist data after refreshing, and I noticed that it has been updated more recently than the one you are using.

In my /route index.js file, I implement it like this:

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
}

Persistent data in Vuex is lost upon refresh

Answer №1

Similar questions

What is the best way to retrieve the input field's name using an Angular2 FormControl object?

Certain sections within a Formik form are failing to update as intended

Place two buttons next to each other on the same row

The Angular reactive form is being submitted without completing the submission process

Using TypeScript to pass parameter in a chained function

Add the list of information during the looping process (map)

Perform asynchronous tasks to assign values to properties of an object within a forEach loop, and then retrieve the object after all asynchronous tasks have been completed

Using tRPC and React-query for optimistic updates is resulting in frequent and distracting flashing updates

Is there a more efficient way to implement class binding in Vue?

Challenges with namespace and require("uniqid") in Typescript when using @types/uniqid

Is there a way to make a parameter optional instead of mandatory?

Working with Angular 4: Utilizing HttpResponse in a Component

The reason behind the clickable issue with my duplicate <ion-select>

Implement tooltip functionality in ssr chart using echarts

Ensuring type safety in TypeScript arrow function parameters

What is the best way to utilize the fresh Sanitizer API in Typescript?

Error TS2403: All variable declarations following the initial declaration must be of the same type in a React project

Async and Await with Typescript

There was an issue with the rendering: "TypeError: Unable to access the property 'text' because it is undefined"

Issues with React TypeScript type definitions not functioning as expected