目录Vuex持久化总结vuex持久化 vuex:刷新浏览器,vuex中的state会重新变为初始状态 解决办法: 使用vuex-persistedstate插件 (实际就是自动
vuex:刷新浏览器,vuex中的state会重新变为初始状态
解决办法:
使用vuex-persistedstate插件 (实际就是自动存在本地存储中)
npm i -S vuex-persistedstate
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中的变量不会变,其实就是自动存在本地存储中
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注编程网的更多内容!
--结束END--
本文标题: vue实际运用之vuex持久化详解
本文链接: https://www.lsjlt.com/news/160661.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0