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中的变量不会变，其实就是自动存在本地存储中
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!
相关文章
在开发中经常有从列表跳到详情页，然后返回详情页的时候需要缓存列表页的状态（比如滚动位置信息），这个时候就需要保存状态，要缓存状态2021-10-10
这篇文章主要介绍了详解vue中this.$emit()的返回值是什么，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
vue3中vue.config.js配置Element-plus组件和Icon图标实现按需自动引入实例代码
这篇文章主要给大家介绍了关于vue3中vue.config.js配置Element-plus组件和Icon图标实现按需自动引入的相关资料,在Vue 3中可以通过配置vue.config.js文件来进行按需自动引入,需要的朋友可以参考下2024-02-02
这篇文章主要来和大家深入讨论一下在Vue开发中是否有必要一定用watch,如果换成watcheffect会如何,文中的示例代码讲解详细,需要的可以参考下2023-12-12
这篇文章主要介绍了react和vue的事件处理差异,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
在vue项目开发中,我们会将经常用到的逻辑或模块抽象成组件,对于那些多个项目都有用到的组件,可以考虑封装成组件库,这篇文章主要给大家介绍了关于webpack如何打包一个按需引入的vue组件库的相关资料,需要的朋友可以参考下2022-02-02
vue里面v-bind和Props 利用props绑定动态数据的方法
今天小编就为大家分享一篇vue里面v-bind和Props 利用props绑定动态数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了vue3中的伸缩菜单组件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了vue项目中添加单元测试的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
本篇文章主要介绍了vue使用mint-ui实现下拉刷新和无限滚动的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
最新评论