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实现电梯样式锚点导航效果流程，这种导航效果广泛应用于商城点餐购物情景，文中通过示例代码介绍的很详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-05-05
这篇文章主要为大家详细介绍了element跨分页操作选择，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
这篇文章主要给大家分享的是Vue 组件化基本使用，所谓组件化，就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。 因为组件是资源独立的，所以组件在系统内部可复用，组件和组件之间可以嵌套，下面来看文章学习内容吧2021-10-10
使用element-ui +Vue 解决 table 里包含表单验证的问题
这篇文章主要介绍了使用element-ui +Vue 解决 table 里包含表单验证的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本
这篇文章主要介绍了Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-10-10
今天小编就为大家分享一篇Vue实现点击按钮复制文本内容的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了vue-cli3.0 特性解读,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要为大家详细介绍了vue.js实现选项卡切换功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了浅谈Vue项目骨架屏注入实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要介绍了vue项目build打包后部分样式错乱的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
最新评论