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中的变量不会变，其实就是自动存在本地存储中

“vuex持久化怎么实现”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！