目的:让在vuex中管理的状态数据同时存储在本地。可免去自己存储的环节。
在开发的过程中,像用户信息(名字,头像,token)需要vuex中存储且需要本地存储。
再例如,购物车如果需要未登录状态下也支持,如果管理在vuex中页需要存储在本地。
我们需要安装一个vuex的插件vuex-persistedstate来支持vuex的状态持久化。
npm i vuex-persistedstate
使用vuex-persistedstate插件来进行持久化
import { createStore } from 'vuex'
import createPersistedState from "vuex-persistedstate";
import user from './modules/user.js'
import cart from './modules/cart.js'
import category from './modules/category.js'
export default createStore({
modules: {
user,
cart,
category
},
// 配置插件
plugins: [
// 默认储存在localstorage
createPersistedState({
// 本地储存名
key: 'ceshivuex',
// 指定模块
paths: ['user', 'cart', 'category']
})
],
})
注意:
1.默认是存储在localStorage中
2.key是存储数据的键名
3.paths是存储state中的那些数据,如果是模块下具体的数据需要加上模块名称,如user.token
4.修改state后触发才可以看到本地存储数据的的变化。
测试: user模块定义一个mutation在main.js去调用下,观察浏览器application的localStorage下数据。
<template>
<div class="app">
{{ $store.state.user.profile.username }}
<hr />
<!-- 修改数据测试是否持久化 -->
<button @click="$store.commit('user/setUser', { username: 'abcd' })">
你来点我啊
</button>
</div>
</template>
————————————————
版权声明:本文为CSDN博主「前端开发bin」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_49790897/article/details/122539718