3步骤教你如何在组件内部提交数据给vuex

本文要结合前面几篇文章才能串起来：

vuex的基本使用8步骤——等同于购物车里面的数量增减：

Vuex为什么要使用actions——差异化展示3步骤

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

项目目录如下图：

如何在组件内部提交数据给vuex共3步骤： 

每一步操作，在相应的代码后面都有备注。

目录

如何在组件内部提交数据给vuex共3步骤： 

---

第1步：方法2等同于方法1在About.vue里面设置方法。

About.vue代码如下：

// About.vue内容

<template>
  <div class="about">
    <h1>This is an about page</h1>
    {{myCount}}--{{user}}   
    {{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'; 
  export default{
    computed:{  
      // count(){
      //   return this.$store.state.count;
      // }
      ...mapState({ 
        myCount:'count',
        user:'username'
      }),
      ...mapGetters(['evenOrOdd'])  
    },
    methods:{ 
      // increment(){
      //   this.$store.dispatch('increment');
      // },
      // decrement(){
      //   this.$store.dispatch('decrement');
      // },
      ...mapMutations(['increment','decrement']),   

      // incrementAsync(){  
      //   this.$store.dispatch('incrementAsync',{   //如何在组件内部提交数据给vuex第1步:方法一,
      //     amount:10
      //   });
      // }
      incrementAsync(){
        this.$store.dispatch({    //如何在组件内部提交数据给vuex第1步:方法二,
          type:'incrementAsync',
          amount:10
        })
      }
      // ...mapActions(['incrementAsync']),   
    }
  }
</script>

第2步：在store/index.js里面设置方法。
第3步：在store/index.js里面设置状态。

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' 
  },
  getters: {
    evenOrOdd(state){   
      return state.count % 2 === 0 ? '偶数' : '奇数'
    }
  },
  mutations: {  
    increment(state){
      state.count++
    },
    decrement(state){
      state.count--
    },
    // incrementAsync(state){ 
    //   setTimeout(()=>{
    //     state.count++;
    //   },1000);
    // }
    incrementAsync(state,amount){   // 如何在组件内部提交数据给vuex第3步：在store/index.js里面设置状态。
      state.count+=amount;
    }
  },
  actions: {  
    increment({commit}){
      commit('increment')
    },
    decrement({commit}){
      commit('decrement')
    },
    incrementAsync({commit},{amount}){    // 如何在组件内部提交数据给vuex第2步：在store/index.js里面设置方法。
      setTimeout(()=>{
        commit('incrementAsync',amount);
      },1000);
    }
  },
  modules: {
  }
})


// 如何在组件内部提交数据给vuex共3步骤：
// 如何在组件内部提交数据给vuex第1步：方法2等同于方法1在About.vue里面设置方法。
// 如何在组件内部提交数据给vuex第2步：在store/index.js里面设置方法。
// 如何在组件内部提交数据给vuex第3步：在store/index.js里面设置状态。

运行结果如下：