vuex持久储存

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);
  },