vue实际运用之vuex持久化详解
程序员文章站
2022-06-16 11:32:44
目录vuex持久化总结vuex持久化vuex:刷新浏览器,vuex中的state会重新变为初始状态解决办法:使用vuex-persistedstate插件 (实际就是自动存在本地存储中) 安装...
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中的变量不会变,其实就是自动存在本地存储中
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注的更多内容!