vuex持久储存
2023-12-25 05:19:13
vuex可以供多组件共同使用一个值,组件可以对值操作另外的组件对应改变。但是这个值浏览器刷新就会把值改变为最初的值,我们可以借助浏览器本地储存做到持久化储存数据。
案列:比如这个控制菜单展开收起的按钮我们借助vuex可以多组件来操作菜单的展开收起,但是当你刷新浏览器时按钮的状态会改变。
1.vuex定义值和方法
先在vuex中定义一个值和方法
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
isCollapse:false
},
getters: {
},
mutations: {
//操作按钮展开收起
SetisCollapse(state){
state.isCollapse =!state.isCollapse
}
},
actions: {
},
modules: {
}
})
2.页面使用
<template>
<div>
<div class="heades">
<i class="icons" :class="isCollapse ? 'el-icon-s-unfold' :'el-icon-s-fold' " @click="SetisCollapse"></i>
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{path:item.url}" v-for="(item,index) in tabslist" :key="index">{{item.menuname}}</el-breadcrumb-item>
</el-breadcrumb>
</div>
</div>
</template>
<script>
import { mapState,mapMutations } from 'vuex'
export default {
name: 'index',
data() {
return {
}
},
computed:{
...mapState(['tabslist','isCollapse'])
},
methods: {
//方法一
// ...mapMutations(['SetisCollapse']),
//方法二
SetisCollapse(){
this.$store.commit('SetisCollapse')
}
},
};
其实这样功能就完成了,但是你关闭菜单刷新浏览器会发现依旧是展开状态。这时候我们就需要借助浏览器本地存储做持久化储存。
1.修改vuex定义的值
state: {
isCollapse:JSON.parse(sessionStorage.getItem("isCollapse")) || false, //菜单收起关闭
},
2.修改方法
SetisCollapse(state){
state.isCollapse =!state.isCollapse
sessionStorage.setItem('isCollapse',state.isCollapse);
},
文章来源:https://blog.csdn.net/qq_61869009/article/details/135118652
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!