sessionStorage和vuex的区别,困扰我的为什么不用sessionStorage要用vuex解决了

前言:很多同学觉得用localstorage可以代替vuex, 对于不变的数据确实可以,但是当两个组件共用一个数据源(对象或数组)时,如果其中一个组件改变了该数据源,希望另一个组件响应该变化时,localstorage,sessionstorage无法做到【这两个组件同时存在。比如一个祖组件,一个孙组件】。因为vuex利用了vue的数据双向绑定,数据是响应的。有兴趣的可以查查vuex实现的原理

总结:如果想要组件间数据动态更新,用vuex;如果只是不用页面想存储一下值可以用sessionStorage。

Vuex是一个状态管理模式库,用于在Vue.js应用程序中管理数据的流动。它允许你在应用程序中集中管理和维护状态,使得状态的变化能够被追踪和调试。 Vuex的用法如下: 1. 安装Vuex:通过npm或yarn安装Vuex库。 2. 创建store:在Vue.js应用程序的入口文件中创建一个新的store实例,这个实例将负责管理应用程序的状态。可以使用Vuex提供的`createStore`函数来创建一个store实例。 3. 定义状态:在store实例中定义需要管理的状态。可以使用`state`选项来定义初始状态。 4. 定义mutations:使用`mutations`选项来定义修改状态的方法。每个mutation方法都接收一个state参数和一个payload参数,用于更新状态。 5. 提交mutations:在Vue组件中通过`this.$store.commit`方法来提交一个mutation,以更新状态。可以在组件的methods中调用该方法。 6. 获取状态:在Vue组件中可以通过`this.$store.state`来获取当前的状态值。 7. 定义actions:使用`actions`选项来定义异步操作和提交多个mutation的逻辑。每个action方法都接收一个context参数,它包含了当前的state、commit方法以及其他有用的属性。 8. 分发actions:在Vue组件中通过`this.$store.dispatch`方法来分发一个action,执行异步操作或者提交多个mutation。可以在组件的methods中调用该方法。 9. 模块化:如果应用程序的状态较为复杂,可以将store分割成多个模块。每个模块都有自己的state、mutations、actions等。 以上是Vuex的基本用法,通过使用Vuex,你可以方便地管理和跟踪应用程序的状态。详细的文档可以参考Vuex官方网站。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值