Vuex persistedState не работает после обновления страницы

Question

Я установил постоянное состояние с помощью npm install --save vuex-persistedstate.

Затем я настраиваю свой файл Vuex store.js следующим образом:

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

.. И в другом компоненте я передаю значение store.title:

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

И это работает.

Но после обновления страницы (F5) this.input больше не сохраняется в this.$store.state.title, и это нарушает функциональность моего сайта.

Что я делаю не так?

РЕДАКТИРОВАТЬ: Я получил это действительно в стиле ванили:

Первый:

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

Тогда:

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

Хотелось бы еще узнать, почему не работает плагин Vuex: (

Answer 1

вы можете попробовать применить приведенный ниже код

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

внутри "createPersistedState", вы также можете установить путь 'paths: [' accessRights ']' в качестве другого свойства. если вы не предоставите пути, то все состояние будет постоянным