VUE实例课程---42、counter实例_vuex_简写

VUE实例课程---42、counter实例_vuex_简写

一、总结

一句话总结：

可以用mapState、mapActions、mapGetters等来代替this.$store.state、this.$store.dispatch、this.$store.getters等，这样可以极大的简化代码

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

<script>
    import {mapState,mapActions,mapGetters} from 'vuex';
    export default {
        name: "Counter",
        data:function () {
            return {};
        },
        computed:{
            ...mapState(['count']) 的运行过程是什么
            先调用, //mapState()返回值：{count(){ return this.$store.state['count']}}
            ...mapGetters(['evenOrOdd']), //mapGetters()返回值：{evenOrOdd(){ this.$store.getters['evenOrOdd'] }}
        },
        methods:{
            ...mapActions(['increment','decrement','incrementIfOdd','incrementAsync','increment3'])
        }
    }
</script>

<style scoped>
button{
    margin-right: 10px;
}
</style>

1、...mapState(['count']) 的运行过程是什么？

先调用mapState()方法，得到一个对象，对象就类似{count(){ return this.$store.state['count']}}，然后通过前面的三点运算符，可以成功得到vuex中的state中的count属性，从而获取数据

2、组件中调用vuex的actions的简写方式？

可以写成 ...mapActions(['increment','decrement','incrementIfOdd','incrementAsync','increment3']) 的形式

  methods:{
      ...mapActions(['increment','decrement','incrementIfOdd','incrementAsync','increment3'])
  }
  // methods:{
  //     increment:function () {
  //         this.$store.dispatch('increment')
  //     },
  //     decrement:function () {
  //         this.$store.dispatch('decrement')
  //     },
  //     incrementIfOdd:function () {
  //         this.$store.dispatch('incrementIfOdd')
  //     },
  //     incrementAsync:function () {
  //         this.$store.dispatch('incrementAsync')
  //     },
  //     increment3:function () {
  //         this.$store.dispatch('increment3')
  //     }
  // }

二、counter实例_vuex_简写

博客对应课程的视频位置：

1、Counter.vue

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

<script>
    import {mapState,mapActions,mapGetters} from 'vuex';
    export default {
        name: "Counter",
        data:function () {
            return {};
            // return {
            //     count:1
            // };
        },
        computed:{
            ...mapState(['count']), //mapState()返回值：{count(){ return this.$store.state['count']}}
            ...mapGetters(['evenOrOdd']), //mapGetters()返回值：{evenOrOdd(){ this.$store.getters['evenOrOdd'] }}
            // evenOrOdd(){
            //     return this.$store.getters.evenOrOdd;
            // },
            // count(){
            //     return this.$store.state.count;
            // }
        },
        methods:{
            ...mapActions(['increment','decrement','incrementIfOdd','incrementAsync','increment3']),
            // test1(){
            //     let map_action=mapActions(['increment','decrement','incrementIfOdd','incrementAsync','increment3']);
            //     console.log(map_action);
            //     for (let i in map_action){
            //         console.log(i);
            //         console.log(map_action[i]);
            //     }
            // }
        }
        // methods:{
        //     increment:function () {
        //         console.log(mapState);
        //         console.log(mapState(['count']));
        //         for (let i in mapState(['count'])){
        //             console.log(i);
        //             console.log(mapState(['count'])[i])
        //         }
        //         this.$store.dispatch('increment')
        //     },
        //     decrement:function () {
        //         // this.count--;
        //         this.$store.dispatch('decrement')
        //     },
        //     incrementIfOdd:function () {
        //         // if(this.count%2===1){
        //         //     this.count++;
        //         // }
        //         this.$store.dispatch('incrementIfOdd')
        //     },
        //     incrementAsync:function () {
        //         // setTimeout(()=>{
        //         //     this.count++;
        //         // },1000);
        //         this.$store.dispatch('incrementAsync')
        //     },
        //     increment3:function () {
        //         this.$store.dispatch('increment3')
        //     }
        // }
    }
</script>

<style scoped>
button{
    margin-right: 10px;
}
</style>

2、store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    //初始化数据
    count:0
  },
  mutations: {
    INCREMENT (state,number=1) {
      state.count+=number;
    },
    DECREMENT (state) {
      state.count--
    }
  },
  actions: {
    increment ({commit}) {
      // 提交一个mutation请求
      commit('INCREMENT')
    },
    decrement ({commit}) {
      // 提交一个mutation请求
      commit('DECREMENT')
    },
    incrementIfOdd ({commit, state}) {
      if(state.count%2===1) {
        // 提交一个mutation请求
        commit('INCREMENT')
      }
    },
    incrementAsync ({commit}) {
      setTimeout(() => {
        // 提交一个mutation请求
        commit('INCREMENT')
      }, 1000)
    },
    increment3 ({commit}) {
      commit('INCREMENT',3);
    }
  },
  getters:{
    evenOrOdd (state) { // 当读取属性值时自动调用并返回属性值
      return state.count%2===0 ? '偶数' : '奇数'
    }
  },
  modules: {
  }
})