Persisted state in Vuex fails to retain data after the page is refreshed

Question

Persisted state in Vuex fails to retain data after the page is refreshed

I recently added persisted state to my Vue application using the command npm install --save vuex-persistedstate.

After that, I configured my Vuex store.js file in the following way:

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
    title: ''
  },
  mutations: {},
  actions: {},
  getters: {},
  plugins: [createPersistedState()]
})

..In another component, I set the value for store.title like this:

this.$store.state.title = this.input

This approach has been effective so far.

However, when I refresh the page (using F5), the stored value from this.input no longer persists in this.$store.state.title, causing a malfunction in my website.

What could I be doing incorrectly?

UPDATE: I found an alternative solution without relying on the Vuex plugin:

First:

this.$store.state.title = this.input
localStorage.setItem('title', this.$store.state.title)

Then:

mounted () {
    this.$store.state.title = localStorage.getItem('title')
  }

I'm still curious about why the Vuex plugin is not functioning as expected :(

javascript vue.js npm vuejs2 vuex

Answer 1

Answer №1

Could you please test out the following code snippet?

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
    title: ''
  },
  mutations: {},
  actions: {},
  getters: {},
  plugins: [createPersistedState({
     key: 'keyname',
     storage: window.localStorage         
  })]
})

In the "createPersistedState" function, you also have the option to specify a path using 'paths: ['accessRights']' as an additional property. If no paths are provided, the entire state will be persisted.

Answer 2

Could you please test out the following code snippet?

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
    title: ''
  },
  mutations: {},
  actions: {},
  getters: {},
  plugins: [createPersistedState({
     key: 'keyname',
     storage: window.localStorage         
  })]
})

In the "createPersistedState" function, you also have the option to specify a path using 'paths: ['accessRights']' as an additional property. If no paths are provided, the entire state will be persisted.

Answer 3

Answer №2

If you are working with #vuex store modules, I found a solution for my #vue #vuex #laravel project to save the store state using #vuex-persistedstate. Remember to set secure to false if you are not using HTTPS.

import createPersistedState from 'vuex-persistedstate';
   import Cookies from 'js-cookie';
   Vue.use(Vuex);
   export default new Vuex.Store({
     strict:true,
   modules:{
    party,
    contract
    },
   plugins: [createPersistedState(
    {
        paths:['party.selectedParty','contract.contracts', 
   'contract.partyId', 
   'contract.partyContracts',
        'contract.selectedContract',

         ],
        storage: {
            getItem: key => Cookies.get(key),
            setItem: (key, value) => Cookies.set(key, value, { expires: 3, 
         secure: false }),
            removeItem: key => Cookies.remove(key)
          },

    }
       )],
   });

Answer 4

If you are working with #vuex store modules, I found a solution for my #vue #vuex #laravel project to save the store state using #vuex-persistedstate. Remember to set secure to false if you are not using HTTPS.

import createPersistedState from 'vuex-persistedstate';
   import Cookies from 'js-cookie';
   Vue.use(Vuex);
   export default new Vuex.Store({
     strict:true,
   modules:{
    party,
    contract
    },
   plugins: [createPersistedState(
    {
        paths:['party.selectedParty','contract.contracts', 
   'contract.partyId', 
   'contract.partyContracts',
        'contract.selectedContract',

         ],
        storage: {
            getItem: key => Cookies.get(key),
            setItem: (key, value) => Cookies.set(key, value, { expires: 3, 
         secure: false }),
            removeItem: key => Cookies.remove(key)
          },

    }
       )],
   });

Answer 5

Answer №3

There are instances where the state in cookies is not updating for unknown reasons. One simple solution is to switch the storage method to localStorage by following these steps:

createPersistedState({
    key: 'somekey',
    storage: window.localStorage,
    // getState: (key) => Cookies.getJSON(key),
    // setState: (key, state) => Cookies.set(key, state, { expires: 3, secure: true })
})

Answer 6

There are instances where the state in cookies is not updating for unknown reasons. One simple solution is to switch the storage method to localStorage by following these steps:

createPersistedState({
    key: 'somekey',
    storage: window.localStorage,
    // getState: (key) => Cookies.getJSON(key),
    // setState: (key, state) => Cookies.set(key, state, { expires: 3, secure: true })
})

Answer 7

Answer №4

I encountered a similar issue with this particular extension, but upon closer inspection, I realized that the root cause wasn't due to my improper use of Vuex. Initially, I was changing state values directly using this.$storage.state.VARIABLENAME, which proved to be incorrect. After revisiting the Vuex documentation, I discovered that accessing state values through mutations was the correct approach. Once I made this adjustment, the extension functioned as intended.

To update state values properly, follow these steps:

context.commit("SET_VARIABLENAME","value")

Your mutations in the Vuex store should resemble the following structure:

mutations: {
   
    SET_VARIABLENAME(state,status){
      state.MYVARIABLE = status
    },

And within the state block of your Vuex setup:

state: {
    MYVARIABLE: null,
}

Answer 8

I encountered a similar issue with this particular extension, but upon closer inspection, I realized that the root cause wasn't due to my improper use of Vuex. Initially, I was changing state values directly using this.$storage.state.VARIABLENAME, which proved to be incorrect. After revisiting the Vuex documentation, I discovered that accessing state values through mutations was the correct approach. Once I made this adjustment, the extension functioned as intended.

To update state values properly, follow these steps:

context.commit("SET_VARIABLENAME","value")

Your mutations in the Vuex store should resemble the following structure:

mutations: {
   
    SET_VARIABLENAME(state,status){
      state.MYVARIABLE = status
    },

And within the state block of your Vuex setup:

state: {
    MYVARIABLE: null,
}

Answer 9

Answer №5

It seems that the issue arises only when a commit call is made:

Your index.js file:

import Vue from "vue";
import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  plugins: [createPersistedState()],
  mutations: {
    increment: state => state.count++,
    decrement: state => state.count--
  }
});

new Vue({
  el: "#app",
  computed: {
    count() {
      return store.state.count;
    }
  },
  methods: {
    assign() {
      store.state.count = 4;
    },
    increment() {
      store.commit("increment");
    },
    decrement() {
      store.commit("decrement");
    }
  }
});

Index.html content:

<div id="app">
  <p>{{ count }}</p>
  <p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </p>
  <p>
    <button @click="assign">Assign 4</button>
  </p>
  <small>
    Go to your localStorage to view the changes.
  </small>
</div>

Details in package.json file:

{
  "name": "vuex-persistedstate",
  "version": "1.0.0",
  "description": "A simple demonstration of the vuex-persistedstate plugin",
  "keywords": ["vue", "vuex", "vuex-persistedstate"],
  "main": "index.js",
  "dependencies": {
    "vue": "2.5.22",
    "vuex": "3.1.0",
    "vuex-persistedstate": "2.5.4"
  }
}

Explore the code in CodeSandbox with dark theme and font size 14.

Answer 10

It seems that the issue arises only when a commit call is made:

Your index.js file:

import Vue from "vue";
import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  plugins: [createPersistedState()],
  mutations: {
    increment: state => state.count++,
    decrement: state => state.count--
  }
});

new Vue({
  el: "#app",
  computed: {
    count() {
      return store.state.count;
    }
  },
  methods: {
    assign() {
      store.state.count = 4;
    },
    increment() {
      store.commit("increment");
    },
    decrement() {
      store.commit("decrement");
    }
  }
});

Index.html content:

<div id="app">
  <p>{{ count }}</p>
  <p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </p>
  <p>
    <button @click="assign">Assign 4</button>
  </p>
  <small>
    Go to your localStorage to view the changes.
  </small>
</div>

Details in package.json file:

{
  "name": "vuex-persistedstate",
  "version": "1.0.0",
  "description": "A simple demonstration of the vuex-persistedstate plugin",
  "keywords": ["vue", "vuex", "vuex-persistedstate"],
  "main": "index.js",
  "dependencies": {
    "vue": "2.5.22",
    "vuex": "3.1.0",
    "vuex-persistedstate": "2.5.4"
  }
}

Explore the code in CodeSandbox with dark theme and font size 14.

Persisted state in Vuex fails to retain data after the page is refreshed

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the origin of this MouseEvent attribute?

Encountered a problem while trying to set up the Angular Material Library that has been cloned from

How can AngularJS service methods be assigned to controller $scope for use in an ng-repeat loop in the view?

Implement a versatile Bootstrap 5 carousel featuring numerous sliders

TS: How can we determine the type of the returned object based on the argument property?

The React project successfully compiled, but it is not displaying in the browser

Encountering an issue with NPM while running `npm install` resulting in the error message: 'npm ERR! Maximum call stack size exceeded'

Typescript issues arise when a library lacks any available types for download

implementing a delay after hovering over a CSS hover effect before activating it

Using JavaScript regex to substitute white spaces and other characters

Adjust the child content within a React component based on the element's width, rather than the overall window size, by implementing dynamic resizing without fixed breakpoints

Exploring the contrast between dependencies and devDependencies in NPM 5

Is there a way to prevent Webpack file names from constantly changing?

Node-pty in NWjs application causing DLL malfunction

Converting a CSV object into a JSON object using Node.js

Run the npm build command to create two different builds

Show or hide text when list item is clicked

Issue with jQuery ajax in Internet Explorer 6

Printing a React component using a button causes formatting related to className to be lost, while printing it inline preserves the formatting

Execute npm commands within a cmake project