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