假如用王者荣耀的方式学习Vuex
英雄介绍
维佑·爱克斯是鲁班大师创造出来的三代机器人,目前负责稷下学院负责学院物资分配工作,他采用集中式存储管理着学院的所有的物资,并以相应的规则保证物资以一种可预测的方式发生变化。
姓名:维佑·爱克斯(vuex)
热度排名:T0
胜率:95%
登场率:90%(中大型项目100%)
Ban率:0%
技能:
State(单一状态树)
被动:cd0秒 消耗0 爱克斯使用State来保存着整个学院的全部物资数据,它作为唯一状态源而存在,为爱克斯提供能量。若被强制破坏更改则对地方英雄造成n 1bug的伤害。
Getter(计算属性)
爱克斯有着超出常人的大脑从而使他的计算能力十分出众,通过使用Getter可以处理state派生的状态,他的返回值会根据依赖缓存起来,当依赖值发生变化才会重新计算。此技能每秒钟对己方英雄造成100%恢复效果。
Mutation(出尔反尔)
定义State数据后,更改State中状态的唯一方法就是释放mutation,mutation接受state作为第一个参数,调用mutation中的事件需要使用commit方法。需要注意的是mutation必须是同步释放,否则将减少自身20%发量。
Action(异步操作)
与mutation不同action是一个可异步释放的技能,通过传入context调用commit提交一个mutation,而非直接变更state状态。此技能爱克斯需要修炼dispatch才可以进行触发。对己方范围内的所有英雄造成200%的移速加成。
Module(多重影分身)
爱克斯通过modules,可以将store分割成模块。每个模块拥有自己的state等属性;
出装:
mapState:
使用mapState辅助函数,mapState是vuex中的函数,需要单独引入,使用方法有很多种; * 箭头函数返回 count: state => state.count
* countAlias传递字符串参数 countAlias: 'count'
* 传入数组 computed: mapState([ // 映射 this.count 为 store.state.count 'count' ])
mapMutation:
使用mapMutation辅助函数可以在组件内获取motation里的方法
methods:{
...mapMutations([ 'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')` ]),
}
mapActions:
使用mapActions辅助函数可以在组件内获取action里的方法
methods: {
...mapActions([ 'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')` // `mapActions` 也支持载荷: 'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)` ]),
...mapActions({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
})
}
dispatch:
dispatch用来分发Action方法
store.dispatch('increment')
commit:
commit用来提交mutation方法
store.commit('increment')
爱克斯的个人原则:
-
应用层级的状态应该集中到单个 store 对象中。
-
提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。
-
异步逻辑都应该封装到 action 里面。
爱克斯如何处理表单:
- 绑定value,然后监听输入,监听事件内调用commit方法触发mutation更改对应state
<!--view-->
<input :value="message" @input="updateMessage">
<!--methods-->
methods: {
updateMessage (e) {
this.$store.commit('updateMessage', e.target.value)
}
}
- 使用computed计算属性 的get和set方法做对应处理
<input v-model="message">
computed: {
message: {
get () {
return this.$store.state.obj.message
},
set (value) {
this.$store.commit('updateMessage', value)
}
}
}
本期英雄介绍完毕,祝大家早日国服王者,我们下期见。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhbfggfi
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01