为什么sessionStorage不能代替vuex

vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

sessionStorage

译为“会话存储”，也是HTML5新增的一个存储对象， 用于本地临时存储同一窗口的数据，在 关闭窗口之后 将会删除这些数据，sessionStorage浏览器一般支持5M。

基本区别

vuex

• 储存在内存（内存详解）中
• 用于组件之间的传值，可以存储字符串、对象等类型的数据
• 刷新页面的时候，vuex存储的值会丢失

sessionStorage

• 会话存储，临时保存
• 只能存储字符串类型，对象使用JSON.stringify方法转换为字符串，涉及到数据转化，
• sessionStorage的数据只能在一个标签内，不同标签不共享。关闭窗口或者标签后会删除数据

应用场景

vuex：当两个组件共用一个数据源（对象或数组）时，如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，vuex把…mapState()放到computed中就可以实现。
sessionStorage：一般是用于不同的页面之间的传值。

直接上demo，当对存储数据进行改变的时候，vuex定义的变量自动更新，因为是响应式的，而本地存储无法自动更新，必须再次调用getItem方法才行

<template>
  <div class="page-wrapper">
    <ul>
      <li>store变量：{{ test1 }}li>
      <li>localStorage自动：{{ test2 }}li>
      <li>localStorage手动更新：{{ test3 }}li>
      <li>
        <el-button @click="changeTest">修改全局testel-button>
      li>
    ul>
  div>
template>
<script>
export default {
  name: "bTest",
  data(){
    return {
      test3: ''
    }
  },
  computed:{
    test1(){
      return this.$store.state.test
    },
    test2(){
      return localStorage.getItem('test2')
    }
  },
  created(){
    this.test3 = localStorage.getItem('test3')
  },
  methods: {
    changeTest(){
      this.$store.commit("setText", 'A我是新值AAAAAA');
      localStorage.setItem("test2", 'B我是新值BBBBBBB');
      localStorage.setItem("test3", 'C我是新值CCCCCCCCC');
      this.changeLocal()
    },
    changeLocal(){
      this.test3 = localStorage.getItem('test3')
    }
  }
};
script>

很多时候，为了解决刷新页面，vuex公共变量变为初始值的问题，一般会结合vuex和sessionStorage一起使用

let mutations = {
  setActiveIndex: (state, activeIndex) => {
    state.activeIndex = activeIndex
    sessionStorage.setItem('activeIndex', activeIndex)
  },
  setCertList: (state, CertListRe) => {
    state.CertListRe = CertListRe
    sessionStorage.setItem('CertListRe',CertListRe)
  }
}