vue实际运用之vuex持久化详解
更新时间：2021年12月23日 11:08:15 作者：GG·bond
这篇文章主要为大家介绍了vue运用之vuex持久化，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
vuex持久化
vuex：刷新浏览器，vuex中的state会重新变为初始状态
解决办法：
使用vuex-persistedstate插件 （实际就是自动存在本地存储中）
- 安装
npm i -S vuex-persistedstate - 引入及配置：在store下的index.js中
import Vue from 'vue'
import Vuex from 'vuex'
//引入
import persistedState from 'vuex-persistedstate'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
num: null,
name: null
},
mutations: {
getNum(state, val) {
state.num = val
},
getName(state, val) {
state.name = val
}
},
//配置
plugins: [
persistedState({
//默认使用localStorage来固化数据，也可使用sessionStorage，配置一样
storage: window.localStorage,
reducer(val) {
return {
// 只储存state中的值
num: val.num,
name: val.name
}
}
})
]
})
我在Home组件中给vuex中的state中变量赋值
created(){
this.$store.commit('getNum',3)
this.$store.commit('getName','胡歌')
},
在H组件中引用
<template>
<div>
{{$store.state.num}}
{{$store.state.name}}
</div>
</template>
这样刷新H组件，$store.state中的变量不会变，其实就是自动存在本地存储中
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!
相关文章
这篇文章主要介绍了Vue.js实现的表格增加删除demo,结合实例形式分析了vue.js数据绑定及元素增加、删除等相关操作技巧,需要的朋友可以参考下2018-05-05
这篇文章主要为大家详细介绍了vue实现文字加密功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
Vue的filters过滤器是比较常见的一个知识点，下面我将结合时间戳转换的例子带你快速了解filters的用法，感兴趣的朋友一起看看吧2021-09-09
这篇文章主要介绍了Vue项目导入导出文件功能以及导出文件后乱码问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
前一段时间小编写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab，觉的非常实用，大家可能在做项目时会用到，感兴趣的朋友跟随脚本之家小编一起学习吧2018-03-03
这篇文章主要介绍了一步一步实现Vue的响应式(对象观测)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
本篇文章主要介绍了Vue 过渡实现轮播图效果，Vue 的过渡系统是内置的，在元素从 DOM 中插入或移除时自动应用过渡效果。有需要的小伙伴可以参考下。2017-03-03
如何使用vue-json-viewer插件展示JSON格式数据
这篇文章主要给大家介绍了关于如何使用vue-json-viewer插件展示JSON格式数据的相关资料,Vue-json-viewer是一个Vue组件,用于在Vue应用中显示JSON数据的可视化工具,需要的朋友可以参考下2023-11-11
Vue.js虽然说是数据驱动页面的，但是有时候我们也要获取dom对象进行一些操作。这篇文章主要给大家介绍了关于vue第一次获取不到元素的解决方法，需要的朋友可以参考下2021-06-06
下面小编就为大家分享一篇使用watch监听路由变化和watch监听对象的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
最新评论