Vuex persistedState插件刷新页面后失效，求排查原因

我一眼就看出问题所在啦——你直接修改Vuex state的方式，刚好绕过了vuex-persistedstate插件的工作机制！

核心问题：直接修改state让插件“看不见”数据变化 #

Vuex的设计规范里，所有state的修改必须通过mutation完成，而vuex-persistedstate插件正是通过监听Vuex的mutation提交事件来触发持久化操作的。你直接写this.$store.state.title = this.input，相当于跳过了mutation流程，插件根本感知不到state已经被修改，自然不会把新值同步到localStorage里，刷新页面后数据当然就没了。

修复方法：改用mutation修改state #

只要按照Vuex的规范来写，插件就能正常工作了，步骤很简单：

1. 在store.js里添加对应的mutation：

export const store = new Vuex.Store({
  state: { title: '' },
  mutations: {
    // 添加这个mutation
    setTitle(state, newTitle) {
      state.title = newTitle
    }
  },
  actions: {},
  getters: {},
  plugins: [createPersistedState()]
})

2. 在组件里通过commit调用mutation，代替直接修改state：

// 组件里的赋值代码改成这样
this.$store.commit('setTitle', this.input)

这样一来，插件就能捕获到mutation的提交事件，自动把更新后的state同步到localStorage，刷新页面后数据也能正常恢复啦～

补充：你的原生实现为什么能生效？ #

你手动调用localStorage.setItem和localStorage.getItem，相当于自己完成了插件的核心工作——把state和本地存储做同步。虽然能生效，但这种方式不符合Vuex的设计理念，当项目变大、多个组件都需要修改title时，很容易出现遗漏同步的情况，维护起来也麻烦。

内容的提问来源于stack exchange，提问作者Tuuchen