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

相关文章
|
1天前
|
JavaScript
vue 动态绑定方法
vue 动态绑定方法
6 0
|
1天前
|
JavaScript
vue拖拽 —— vuedraggable 表格拖拽行
vue拖拽 —— vuedraggable 表格拖拽行
4 1
|
1天前
|
JavaScript
vue 手动/局部刷新组件
vue 手动/局部刷新组件
5 0
|
1天前
|
JavaScript 搜索推荐
vue【详解】props —— 子组件接收父组件传入的参数
vue【详解】props —— 子组件接收父组件传入的参数
6 0
|
1天前
|
JavaScript
vue 组件封装 | s-fullpage 全屏滚动 (内含绑定鼠标滑轮滚动事件、避免鼠标滑轮连续滚动、滑动过渡动画等实用技巧)
vue 组件封装 | s-fullpage 全屏滚动 (内含绑定鼠标滑轮滚动事件、避免鼠标滑轮连续滚动、滑动过渡动画等实用技巧)
13 4
|
JavaScript
vue组件监听vuex的属性
vue组件监听vuex的属性
|
1天前
|
JavaScript
vue 动画 —— 滚动动画
vue 动画 —— 滚动动画
6 0
|
1天前
|
JavaScript
vue 监听滚动条行为 | 判断滚动条是向上滚动还是向下滚动
vue 监听滚动条行为 | 判断滚动条是向上滚动还是向下滚动
8 0
|
1天前
|
JavaScript
vue 组件封装 | s-scroll 页面滚动动画
vue 组件封装 | s-scroll 页面滚动动画
6 0
|
1天前
|
JavaScript 前端开发
vue 页面下滚到目标元素的位置,目标元素自动吸顶(自动悬浮吸附到页面顶部)
vue 页面下滚到目标元素的位置,目标元素自动吸顶(自动悬浮吸附到页面顶部)
9 0