耀极客论坛

 找回密码
 立即注册
查看: 706|回复: 0

vue实际运用之vuex持久化详解

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-8 02:30:00 | 显示全部楼层 |阅读模式
  这篇文章主要为大家介绍了vue运用之vuex持久化,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

vuex持久化
  1. vuex:刷新浏览器,vuex中的state会重新变为初始状态
复制代码
  解决办法:
  1. 使用vuex-persistedstate插件 (实际就是自动存在本地存储中)
复制代码
       
  • 安装 npm i -S vuex-persistedstate   
  • 引入及配置:在store下的index.js中
  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  3. //引入
  4. import persistedState from 'vuex-persistedstate'
  5. Vue.use(Vuex)
  6. export default new Vuex.Store({
  7.   state: {
  8.     num: null,
  9.     name: null
  10.   },
  11.   mutations: {
  12.     getNum(state, val) {
  13.       state.num = val
  14.     },
  15.     getName(state, val) {
  16.       state.name = val
  17.     }
  18.   },
  19.   //配置
  20.   plugins: [
  21.     persistedState({
  22.     //默认使用localStorage来固化数据,也可使用sessionStorage,配置一样
  23.       storage: window.localStorage,
  24.       reducer(val) {
  25.         return {
  26.         // 只储存state中的值
  27.           num: val.num,
  28.           name: val.name
  29.         }
  30.       }
  31.     })
  32.   ]
  33. })
复制代码
  我在Home组件中给vuex中的state中变量赋值
  1. created(){
  2.     this.$store.commit('getNum',3)
  3.     this.$store.commit('getName','胡歌')
  4.   },
复制代码
  在H组件中引用
  1. ‹template>
  2.   ‹div>
  3.       {{$store.state.num}}
  4.       {{$store.state.name}}
  5.   ‹/div>
  6. ‹/template>
复制代码
  这样刷新H组件,$store.state中的变量不会变,其实就是自动存在本地存储中


总结

  本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-10 02:32 , Processed in 0.072875 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表