vuex可以供多组件共同使用一个值,组件可以对值操作另外的组件对应改变。但是这个值浏览器刷新就会把值改变为最初的值,我们可以借助浏览器本地储存做到持久化储存数据。
案列:比如这个控制菜单展开收起的按钮我们借助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: {
}
})
<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);
},