为什么sessionStorage不能代替vuex

最新推荐文章于 2024-04-29 16:06:18 发布

baby加油_

最新推荐文章于 2024-04-29 16:06:18 发布

阅读量1.1k

点赞数

文章标签：开发语言 javascript vue

本文链接：https://blog.youkuaiyun.com/qq_34664239/article/details/131221246

版权

Vuex是一个用于管理Vue应用状态的库，数据在内存中并响应式更新。sessionStorage是HTML5的存储机制，仅在同一窗口内有效，数据以字符串形式存储。Vuex适合组件间共享复杂状态，而sessionStorage适用于跨页面传递简单数据。在刷新页面时，Vuex状态丢失，通常会结合sessionStorage实现数据持久化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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一起使用

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