假如用王者荣耀的方式学习Vuex

共 2401字,需浏览 5分钟

 ·

2020-10-23 21:56



作者 | 李初五        整理 | 桔子酱



维佑 · 爱克斯



维佑·爱克斯是鲁班大师创造出来的三代机器人,目前负责稷下学院物资分配工作,他采用集中式存储管理着学院的所有的物资,并以相应的规则保证物资以一种可预测的方式发生变化。

姓名:维佑·爱克斯(vuex)

热度排名:T0

胜率:95%

登场率:90%(中大型项目100%)

Ban率:0%



 01  Status(单一状态树)




被动:cd0秒 消耗0 爱克斯使用 State 来保存着整个学院的全部物资数据,它作为唯一状态源而存在,为爱克斯提供能量。若 被强制破坏更改则对地方英雄造成n+1bug的伤害。


 02  Getter(计算属性)




爱克斯有着超出常人的大脑从而使他的计算能力十分出众,通过使用 Getter 可以处理 state 派生的状态,他的返回值会根据依赖缓存起来,当依赖值发生变化才会重新计算。此技能每秒钟对己方英雄造成100%恢复效果。


 03  Mutation(出尔反尔)




定义 State 数据后,更改State中状态的唯一方法就是释放 mutation,mutation 接受 state 作为第一个参数,调用 mutation 中的事件需要使用 commit 方法。需要注意的是 mutation 必须是同步释放,否则将减少自身20%发量。


 04  Action(异步操作)




与 mutation 不同 action 是一个可异步释放的技能,通过传入 context 调用 commit 提交一个 mutation ,而非直接变更 state 状态。此技能爱克斯需要修炼 dispatch 才可以进行触发。对己方范围内的所有英雄造成200%的移速加成。


 05  Module(多重影分身)




爱克斯通过 modules,可以将 store 分割成模块。每个模块拥有自己的 state 等属性;





 01  mapState




使用 mapState 辅助函数,mapState 是 vuex 中的函数,需要单独引入,使用方法有很多种:

  • 箭头函数返回

count: state => state.count


  • countAlias 传递字符串参数

 countAlias: 'count'


  • 传入数组 

computed: mapState([// 映射 this.count 为 store.state.count 'count' ])



 02  mapMutation




使用 mapMutation 辅助函数可以在组件内获取 mutation 里的方法

methods:{...mapMutations([      'increment', //`this.increment()` 映射为 `this.$store.commit('increment')`    ]),}


 03  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')` }) }


 04  dispatch




dispatch 用来分发 Action 方法

store.dispatch('increment')


 05  commit




commit 用来提交 mutation 方法

store.commit('increment')




爱克斯的个人原则


  • 应用层级的状态应该集中到单个 store 对象中。
  • 提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。
  • 异步逻辑都应该封装到 action 里面。




爱克斯如何处理表单


1. 绑定 value,然后监听输入,监听事件内调用 commit 方法触发 mutation 更改对应 state

:value="message" @input="updateMessage">
methods: {  updateMessage (e) {    this.$store.commit('updateMessage', e.target.value)  }}
2. 使用 computed 计算属性的 get 和 set 方法做对应处理、

<input v-model="message">
computed: {  message: {    get () {      return this.$store.state.obj.message    },    set (value) {      this.$store.commit('updateMessage', value)    }  }}


本期英雄介绍完毕,祝大家早日国服王者,我们下期见。





如果你喜欢探讨技术,或者对本文有任何的意见或建议,非常欢迎加鱼头微信好友一起探讨,当然,鱼头也非常希望能跟你一起聊生活,聊爱好,谈天说地。鱼头的微信号是:krisChans95 也可以扫码关注公众号,订阅更多精彩内容。


浏览 21
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报