vuex辅助函数mapState,mapGetters,mapMutations,mapActions的应用

项目目录下如：

Vuex辅助函数的运用——mapState应用4步骤：

Vuex辅助函数的运用——mapState应用第1步:在store/index.js里面设置username。

index.js代码如下：

// store/index.js内容

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:0,
    username:'longfei' //Vuex系列的辅助函数的运用——mapState应用第1步:在store/index.js里面设置username。
  },
  getters: {
  },
  mutations: {  
    increment(state){
      state.count++
    },
    decrement(state){
      state.count--
    },
    // incrementAsync(state){ 
    //   setTimeout(()=>{
    //     state.count++;
    //   },1000);
    // }
    incrementAsync(state){  
      state.count++;
    }
  },
  actions: {  
    increment({commit}){
      commit('increment')
    },
    decrement({commit}){
      commit('decrement')
    },
    incrementAsync({commit}){  
      setTimeout(()=>{
        commit('incrementAsync');
      },1000);
    }
  },
  modules: {
  }
})


//Vuex系列的辅助函数的运用——mapState应用4步骤：
//Vuex系列的辅助函数的运用——mapState应用第1步:在store/index.js里面设置username。
//Vuex系列的辅助函数的运用——mapState应用第2步:在About.vue里面导入方法。
//Vuex系列的辅助函数的运用——mapState应用第3步:在About.vue里面获取count和username。
//Vuex系列的辅助函数的运用——mapState应用第4步:在About.vue里面展示count和username。

Vuex辅助函数的运用——mapState应用第2步:在About.vue里面导入方法。
Vuex辅助函数的运用——mapState应用第3步:在About.vue里面获取count和username。
Vuex辅助函数的运用——mapState应用第4步:在About.vue里面展示count和username。

About.vue代码：

// About.vue内容

<template>
  <div class="about">
    <h1>This is an about page</h1>
    {{myCount}}--{{user}}   <!-- //Vuex系列的辅助函数的运用——mapState应用第4步:在About.vue里面展示count和username。 -->
    {{count}} 
    <button @click="increment">+1</button>  
    <button @click="decrement">-1</button>
    <button @click="incrementAsync">+1异步</button>  
  </div>
</template>
<script>
import { mapState,mapGetters,mapMutations,mapActions } from 'vuex'; //Vuex系列的辅助函数的运用——mapState应用第2步:在About.vue里面导入方法。
  export default{
    computed:{  
      // count(){
      //   return this.$store.state.count;
      // }
      ...mapState({ //Vuex系列的辅助函数的运用——mapState应用第3步:在About.vue里面获取count和username。
        myCount:'count',
        user:'username'
      })
    },
    methods:{ 
      increment(){
        this.$store.commit('increment');
      },
      decrement(){
        this.$store.commit('decrement');
      },
      incrementAsync(){  
        this.$store.commit('incrementAsync');
      }
    }
  }
</script>

运行结果如下：

---

Vuex系列的辅助函数的运用——getter应用3步骤：

Vuex系列的辅助函数的运用——getter应用第1步:在store/index.js里面设置方法。

// store/index.js内容

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:0,
    username:'longfei' //Vuex系列的辅助函数的运用——mapState应用第1步:在store/index.js里面设置username。
  },
  getters: {
    evenOrOdd(state){   //Vuex系列的辅助函数的运用——getter应用第1步:在store/index.js里面设置方法。
      return state.count % 2 === 0 ? '偶数' : '奇数'
    }
  },
  mutations: {  
    increment(state){
      state.count++
    },
    decrement(state){
      state.count--
    },
    // incrementAsync(state){ 
    //   setTimeout(()=>{
    //     state.count++;
    //   },1000);
    // }
    incrementAsync(state){  
      state.count++;
    }
  },
  actions: {  
    increment({commit}){
      commit('increment')
    },
    decrement({commit}){
      commit('decrement')
    },
    incrementAsync({commit}){  
      setTimeout(()=>{
        commit('incrementAsync');
      },1000);
    }
  },
  modules: {
  }
})


//Vuex系列的辅助函数的运用——mapState应用4步骤：
//Vuex系列的辅助函数的运用——mapState应用第1步:在store/index.js里面设置username。
//Vuex系列的辅助函数的运用——mapState应用第2步:在About.vue里面导入方法。
//Vuex系列的辅助函数的运用——mapState应用第3步:在About.vue里面获取count和username。
//Vuex系列的辅助函数的运用——mapState应用第4步:在About.vue里面展示count和username。


//Vuex系列的辅助函数的运用——getter应用3步骤：
//Vuex系列的辅助函数的运用——getter应用第1步:在store/index.js里面设置方法。
//Vuex系列的辅助函数的运用——getter应用第2步:在About.vue里面设置mapGetters函数。
//Vuex系列的辅助函数的运用——getter应用第3步:在About.vue里面展示evenOrOdd。

Vuex系列的辅助函数的运用——getter应用第2步:在About.vue里面设置mapGetters函数。
Vuex系列的辅助函数的运用——getter应用第3步:在About.vue里面展示evenOrOdd。

// About.vue内容

<template>
  <div class="about">
    <h1>This is an about page</h1>
    {{myCount}}--{{user}}   <!-- //Vuex系列的辅助函数的运用——mapState应用第4步:在About.vue里面展示count和username。 -->
    {{count}} 
    {{evenOrOdd}}
    <button @click="increment">+1</button>  
    <button @click="decrement">-1</button>
    <button @click="incrementAsync">+1异步</button>  
  </div>
</template>
<script>
import { mapState,mapGetters,mapMutations,mapActions } from 'vuex'; //Vuex系列的辅助函数的运用——mapState应用第2步:在About.vue里面导入方法。
  export default{
    computed:{  
      // count(){
      //   return this.$store.state.count;
      // }
      ...mapState({ //Vuex系列的辅助函数的运用——mapState应用第3步:在About.vue里面获取count和username。
        myCount:'count',
        user:'username'
      }),
      ...mapGetters(['evenOrOdd'])  //Vuex系列的辅助函数的运用——getter应用第2步:在About.vue里面设置mapGetters函数。
    },
    methods:{ 
      increment(){
        this.$store.commit('increment');
      },
      decrement(){
        this.$store.commit('decrement');
      },
      incrementAsync(){  
        this.$store.commit('incrementAsync');
      }
    }
  }
</script>

运行结果：

---

Vuex系列的辅助函数的运用——mapMutations和mapActions方法各一步。 

在About.vue里面设置，效果一样：

About.vue代码：

// About.vue内容

<template>
  <div class="about">
    <h1>This is an about page</h1>
    {{myCount}}--{{user}}   <!-- //Vuex系列的辅助函数的运用——mapState应用第4步:在About.vue里面展示count和username。 -->
    {{count}} 
    {{evenOrOdd}}
    <button @click="increment">+1</button>  
    <button @click="decrement">-1</button>
    <button @click="incrementAsync">+1异步</button>  
  </div>
</template>
<script>
import { mapState,mapGetters,mapMutations,mapActions } from 'vuex'; //Vuex系列的辅助函数的运用——mapState应用第2步:在About.vue里面导入方法。
  export default{
    computed:{  
      // count(){
      //   return this.$store.state.count;
      // }
      ...mapState({ //Vuex系列的辅助函数的运用——mapState应用第3步:在About.vue里面获取count和username。
        myCount:'count',
        user:'username'
      }),
      ...mapGetters(['evenOrOdd'])  //Vuex系列的辅助函数的运用——getter应用第2步:在About.vue里面设置mapGetters函数。
    },
    methods:{ 
      // increment(){
      //   this.$store.dispatch('increment');
      // },
      // decrement(){
      //   this.$store.dispatch('decrement');
      // },
      ...mapMutations(['increment','decrement']),   //Vuex系列的辅助函数的运用——mapMutations 方法

      // incrementAsync(){  
      //   this.$store.dispatch('incrementAsync');
      // }
      ...mapActions(['incrementAsync']),    //Vuex系列的辅助函数的运用——mapActions 方法
    }
  }
</script>

运行结果如下：