网络编程
位置：首页>> 网络编程>> JavaScript>> vue实际运用之vuex持久化详解

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

作者：GG·bond　　发布时间：2024-05-09 15:15:50　

标签：vue,vuex,持久化
目录

  • 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实际运用之vuex持久化详解

总结

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

来源：https://blog.csdn.net/GTbond/article/details/122097410

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com