vue实际运用之vuex持久化详解
作者:GG·bond 时间:2024-05-09 15:15:50
目录
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中的变量不会变,其实就是自动存在本地存储中
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注asp之家的更多内容!
来源:https://blog.csdn.net/GTbond/article/details/122097410
标签:vue,vuex,持久化
0
投稿
猜你喜欢
Asp操作Xml的精炼类,含示例代码
2011-02-28 11:11:00
Python fire模块(最简化命令行生成工具)的使用教程详解
2022-06-10 15:25:00
windows10在visual studio2019下配置使用openCV4.3.0
2021-10-23 12:23:31
使用get方式提交表单在地址栏里面不显示提交信息
2024-06-05 09:35:10
asp如何制作一个文本文件编辑器?
2010-07-07 12:26:00
golang bad file descriptor问题的解决方法
2024-05-09 09:31:42
使用Vue自定义指令实现Select组件
2024-05-09 15:26:41
Golang的性能优化和调试技巧
2024-04-25 15:30:24
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2023-11-19 09:18:32
详解django.contirb.auth-认证
2021-12-21 16:48:40
Python程序暂停的正常处理方法
2023-07-17 23:21:47
matplotlib subplots 设置总图的标题方法
2022-10-09 13:49:42
显示日期格式的几个函数
2008-09-03 13:20:00
pytorch构建多模型实例
2021-05-14 13:30:00
Linux PHP连接MSSQL
2011-06-02 12:01:00
实例验证MySQL|update字段为相同的值是否会记录binlog
2024-01-21 01:37:40
linux 后台日志 mysql 错误异常的解释(推荐)
2024-01-26 06:01:42
浅谈Python的条件判断语句if/else语句
2021-03-06 12:11:02
python3字符串操作总结
2023-08-23 22:31:23
pygame实现方块动画实例讲解
2022-11-01 13:37:46