vuex 理解

为什么要用vuex?页面由多个视图组成,用户操作会引视图的状态变化。

  • 多个视图依赖于同一状态(例如:菜单导航)
  • 来自不同视图的行为需要变更同一状态(例如:评论弹幕)
    1729700-20190705163141587-364439206.png

    vuex 的作用

  • 为vue.js开发的状态管理模式
  • 组件状态集中管理
  • 组件状态改变遵循统一的规则
    vuex 使用store.js
    1729700-20190705165011858-1072516013.png

state:组件状态
mutations:唯一可以改变vuex状态的方法集。

vuex的使用

在组件1(info.vue)中引store.js:import store from '@/store'(@代表src目录),
1729700-20190705170538183-1720736224.png

在组件1中的methods中引用store.js中定义的方法,并将状态变化值保存在store.js中
1729700-20190705170429975-1462762440.png
其它组件(about.vue)要引用组件1中改变的值就要引入store.js
1729700-20190705171230949-678433053.png
vuex可以理解为状态管理中央,由store.js来实现。
1729700-20190716213458586-954375353.png

注意:vuex刷新页面状态就没了,所以需要localStorage或者sessionStorage来配合

下面是具体的使用方法:

1.查询数据:this.$store.state.name   |    this.$store.getters.getUsername

2.修改数据:this.$store.dispatch('changeName', 'newname')

转载于:https://www.cnblogs.com/denken/p/11139170.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值