Vue的学习（17）

优化昨日Demo

<template>
  <div>
    <p>click {{count}} times, count is {{evenOrOdd}}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementIfOdd">increment if odd</button>
    <button @click="incrementAsync">increment async</button>
  </div>
</template>

<script>
  import {mapState, mapGetters, mapActions} from 'vuex'
  export default {

    computed:{
      ...mapState(['count']),
      //mapState()返回值：{count(){return this.$store.count}}
      ...mapGetters(['evenOrOdd']),
     //  count(){
     //    return this.$store.count
     //  },
     // evenOrOdd(){
     //   return this.$store.getters.evenOrOdd
     // }
    },
    methods:{
      ...mapActions(['increment', 'decrement', 'incrementIfOdd', 'incrementAsync'])
    }

    
    // // 所有用 vuex 管理的组件中都多了一个属性$store, 它就是一个 store 对象
    // methods:{
    //   increment(){
    //     //通知vuex去增加
    //     this.$store.dispatch('increment')//触发store中action调用
    //   },
    //   decrement(){
    //     this.$store.dispatch('decrement')
    //   },
    //   incrementIfOdd(){
    //     this.$store.dispatch('incrementIfOdd')
    //   },
    //   incrementAsync(){
    //     this.$store.dispatch('incrementAsync')
    //   },
    // },
  }
</script>

<style>

</style>

…mapActions([‘increment’, ‘decrement’, ‘incrementIfOdd’, ‘incrementAsync’])
这些值就是store中的对应值，尽量一一对应名字，如果store中名字是evenOrOdd2，想用evenOrOdd 的话，记忆需要这样写：…mapGetters({evenOrOdd :'evenOrOdd’2}),