如何实现Vue项目中Vuex状态持久化存储详细教程？

本文共计338个文字，预计阅读时间需要2分钟。

目录 + Vuex持久化 + 总结 + Vuex持久化：刷新浏览器，Vuex中的state会重新变为初始状态 + 解决办法：使用vuex-persistedstate插件（实际上就是自动存储在本地存储中） + 安装：npm i -S vuex-persistedstate

目录

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

总结

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