robinvdvleuten / vuex-persistedstate

💾 Persist and rehydrate your Vuex state between page reloads.
https://npm.im/vuex-persistedstate
MIT License
5.76k stars 378 forks source link

improve NuxtJS usage instructions #354

Closed fabiom91 closed 3 years ago

fabiom91 commented 3 years ago

nuxt.config.js plugins:

plugins: [{ src: '~/plugins/persistedState.client.js' }],

plugins/persistedState.client.js

import createPersistedState from 'vuex-persistedstate'

export default ({ store }) => {
  createPersistedState({
    key: 'current_session',
    paths: '/',
  })(store)
}

store/index.js

export const state = () => ({
  mySurveys: [],
})

export const mutations = {
  SET_MY_SURVEYS(state, surveys) {
    state.mySurveys = surveys
  },
}

What you did: I followed the Readme to configure client side plugin for NuxtJS by creating a new plugin called persistedState.client.js and adding the plugin in nuxt.config.js as above.

What happened: No error but when I reload the page, the data pulled from the Vuex storage disappear as usual.

Problem description: I followed the Nuxtjs part of the readme but the Vuex storage is still ignoring the plugin. I believe I'm missing something but I can't find further info in the documentation. So after setting up the plugin, what do I need to do to make sure that if I reload a page that is using data from Vuex storage, keep using the data?

Suggested solution: Please improve readme.

fabiofdsantos commented 3 years ago

Paths must be specified using dot notation.

Examples:

fabiom91 commented 3 years ago

Paths must be specified using dot notation.

Examples:

  • store/surveys.js ['surveys']
  • store/anything/surveys.js ['anything.surveys']

Thanks Fabio, It worked! :)