为什么sessionStorage不能代替vuex-Toy模板网

这篇具有很好参考价值的文章主要介绍了为什么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">修改全局test</el-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一起使用文章来源地址https://www.toymoban.com/news/detail-486714.html

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