DAY12 资料室--Vuex辅助函数让代码更简洁

前言

各位捧由，相信经过几天的研究後，我们现在对Vuex都有多一些的了解啦！
不晓得各位有没有觉得，在 Vue 元件中使用时，要一直用到 this.$store.state 、 this.$store.dispatch　很麻烦呢？
不想要过多的重复劳动，也想让程序码更简洁的话，我们就来研究一下 Vuex 的辅助函数吧！

mapState

state 可以使用辅助参数就是 mapState，在 Vue 元件中怎麽使用呢？
首先要 import

import { mapState } from 'vuex'

以这段作为范例，如何使用 mapState 简洁我们的程序码呢？

export default {
  // ...
  computed: {
    count () {
      return this.$store.state.countModules.count
    }
  }
}

• 可以使用箭头函式

export default {
  // ...
  computed: mapState({
    count: state => state.count,
    }
  })
}

• 可以传字串作为参数，等同 state => state.count

export default {
  // ...
  computed: mapState({
    countAlias: 'count',
  })
}

• 为了能够使用 this 获取局部状态，必须使用常规函数

export default {
  // ...
  computed: mapState({
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

• 使用 ES6 的展开运算符，将此对象混入到外部对象中

computed: {
  localComputed () { /* ... */ },
  ...mapState(['count'])
}

而且可以放不只一个哦，假设我们除了 count 还有 stateA、stateB，就可这样用

computed: {
  localComputed () { /* ... */ },
  ...mapState(['count','stateA','stateB'])
}

• 带命名的模组对象如何使用？
  假设我们的 count 放在 countModule 带命名模组中，是模组区域变数
  sateA 、 stateB 是全域变数，这样如何使用呢？
  很简单，只要把模组名称带入前面就可以，如下：

computed: {
  localComputed () { /* ... */ },
  ...mapState('countModules',['count'])
  ...mapState(['moduleA','moduleB'])
}

mapGetters、mapMutations、mapActions

经过上面 mapState 的研究，我们对於使用方式应有一定的了解了
换作 mapGetters 、 mapMutations 、 mapActions 其实也都大同小异，一样我们需要先 import

import { mapGetters , mapMutations , mapActions } from 'vuex'

将 getter 混入 computed 中

getter 部分跟 state 差不多，就不多补充说明罗！

export default {
  // ...
  computed: {
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

将 mutations、actions 混入 methods 中

以这段作为范例，要如何使用mapActions呢？

export default {
  methods: {
    updateCount () {
      this.$store.dispatch('updateCount')
    }
  },
}

• 使用ES6的展开运算符，将此对象混入到外部对象中

export default {
  // ...
  methods: {
    ...mapActions(['updateCount'])
  }
}

• 如果要传参数怎麽办呢？
  假设今天 updateCount 要增加多少数量，要另外传参数进入，如下范例：

export default {
  methods: {
    updateCount (num) {
      this.$store.dispatch('updateCount', num)
    }
  },
}

其实没关系，不用额外写什麽，直接可以传。

export default {
  // ...
  methods: {
    ...mapActions(['updateCount']),
    //this.$store.dispatch('updateCount', num)
  }
}

• 如何使用不同的命名呢？

export default {
  // ...
  methods: {
    ...mapActions({
      add: 'updateCount'
    })
  }
}

• 带命名模组的 actions 如何使用呢？
  一样是把模组名称带入前面就可以，如下：

export default {
  // ...
  methods: {
    ...mapActions('countModules',['updateCount']),
    })
  }
}

• mutations 部分跟 actions 差不多，就不补充说明罗。

export default {
  // ...
  methods: {
    ...mapMutations([
      'updateCount', 
      'updateCountBy' 
    ]),
    ...mapMutations({
      add: 'updateCount' 
    })
  }
}