概述
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实际运用之vuex持久化详解的全部内容，希望文章能够帮你解决vue实际运用之vuex持久化详解所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复