Vue Vuex 更新页面 Store 数据丢失

简介: Vue Vuex 更新页面 Store 数据丢失

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, 可自行百度了解。

相关文章
|
5天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem
|
6天前
|
缓存 JavaScript
vue学习(12)计算属性
vue学习(12)计算属性
15 3
|
6天前
|
缓存 JavaScript
vue学习(12)计算属性
vue学习(12)计算属性
18 2
|
5天前
|
JavaScript
Vue组件传值异步问题--子组件拿到数据较慢
Vue组件传值异步问题--子组件拿到数据较慢
9 0
|
5天前
|
缓存 JavaScript
Vue中的keep-alive是什么意思?以及如何使用
Vue中的keep-alive是什么意思?以及如何使用
|
8天前
|
JavaScript
vue学习(3)模板语法
vue学习(3)模板语法
40 11
|
8天前
|
存储 JavaScript 前端开发
vue学习(2)
vue学习(2)
198 65
|
8天前
|
JavaScript 算法 前端开发
vue学习(1)
vue学习(1)
198 62
|
7天前
|
JavaScript
vue学习(4)数据绑定
vue学习(4)数据绑定
27 10
|
7天前
|
JavaScript 前端开发
vue学习(6)
vue学习(6)
25 9