假如用王者荣耀的方式学习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 里面。

爱克斯如何处理表单:

  1. 绑定value,然后监听输入,监听事件内调用commit方法触发mutation更改对应state
<!--view-->
<input :value="message" @input="updateMessage">
<!--methods-->
methods: {
  updateMessage (e) {
    this.$store.commit('updateMessage', e.target.value)
  }
}
复制代码
  1. 使用computed计算属性 的get和set方法做对应处理
<input v-model="message">
复制代码
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}
复制代码

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

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章