脚本宝典收集整理的这篇文章主要介绍了vue实际运用之vuex持久化详解,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
vuex:刷新浏览器,vuex中的state会重新变为初始状态
解决办法:
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中变量赋值
在H组件中引用
<template> <div> {{$store.state.num}} {{$store.state.name}} </div> </template>
这样刷新H组件,$store.state中的变量不会变,其实就是自动存在本地存储中
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本宝典的更多内容!
以上是脚本宝典为你收集整理的vue实际运用之vuex持久化详解全部内容,希望文章能够帮你解决vue实际运用之vuex持久化详解所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。