Vue Vuex 更新页面 Store 数据丢失

287 阅读1分钟

vue 在使用 vuex 缓存数据的时候,刷新页面之后会发现之前存好的数据没了。 这里我们需要借助 vuex-persistedstate 数据持久化插件来实现

$ npm i -S vuex-persistedstate

安装之后找到 vuex 初始化的位置

import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import user from './modules/user'
import getters from './getters'
// 导入插件
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    app,
    user
  },
  state: {

  },
  mutations: {

  },
  actions: {

  },
  getters,
  // 使用插件
  plugins: [createPersistedState()]
})

这样之后就可以达到数据持久化了,如果需要详细了解 vuex-persistedstate, 可自行百度了解。