Vuex的基础用法和辅助函数的基本用法

import Vue from "vue"
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
  state:{
      count:1
  },
  mutations:{
    //第一个是state参数，第二个是usr自定义参数，或称为载荷（payload），也就是我在登录的时候传入的数据
    add_context_num(state,n){
      state.count += n
      console.log(state.count )
    }
  },
  //异步用到actions
  actions:{
      addContextnum(context,num){
        context.commit("add_context_num",num)
      }
  },
  //通过getters获取数据
  getters:{

  }
});


export  default store;

 

/***********vue组件***********/

<template>
    <div class="app-container">
       {{count}}
        <button @click="shopActionMoney(10)">header点我</button>
    </div>
</template>

<script>
  import { mapMutations ,mapActions} from "vuex"
  export default {
    data () {
      return {
        count:this.$store.state.count
      }
    },
    mounted () {

    },
    methods: {

      /**
       * 第一种
       * Vuex通过辅助函数mapActions调用actions里面的方法 实现自增
       * **/
      ...mapActions({
         addnum:'addContextnum'
      }),
      /**
       *第一种
       * Vuex通过辅助函数mapMutations调用mutations里面的方法 实现自增
       * **/
      ...mapMutations({
          addnum:"add_context_num"
      }),
      addnum(){
        /**
         * 第二种通过 this.$store.commit触发mutations方法实现自增
         * 第二种通过 this.$store.dispatch触发actions方法实现自增
         **/
        // this.$store.commit("add_context_num",10)
        // this.$store.dispatch("addContextnum",10)
        // this.count=this.$store.state.count
      }
    }
  }
</script>

<style scoped>

</style>