Vuex基本使用例子(使用dispatch和commit)

搜了一篇文章,踩了坑,重新实践 有坑  在Vuex使用 以及 dispatch和commit来调用mutations的区别

实际生产级开发时,会将Vuex的使用中涉及到actions, mutations 单独写成独立的js文件.此处仅作基本的Vuex学习演示,帮助入门理解.  

Vuex 官方API

 main.js 

import Vue from 'vue'
import App from './App' /* 基本配置,入口模板*/
import Vuex from 'vuex'
import router from './router'

Vue.use(Vuex); //必须的
//演示Vuex的3个基本模块作用,mutations、
const store = new Vuex.Store({
  state: {
    nickName: "",
    cartCount: 0
  },

  mutations: {
    //注意：和action的context.commit("updateUserInfo",agrs)相对应
    updateUserInfo: (state, n) => {
      //debugger
      state.nickName = n;
      //state.nickName = n.nickName;//传递二个参数，形式二
    },
    updateCartCount:(state,cartCount) =>{
      state.cartCount += cartCount;
    },
    increment: (state, n) => {
      state.count += n;
    }
  },
  actions: {
    //Step1： 被Vuex_Demo1.vue的 this.$store.dispatch("updateUserInfo", "xxx"); 
    updateUserInfo(context,agrs) {
      context.commit("updateUserInfo",agrs);//Step2：再去调用mutations中的
    },
    updateCartCount(context) {
      context.commit("updateCartCount");
    },
    increment(context, args) {
      context.commit('increment', args);
    }
  }
})
//Vue的全局模板挂载模式
Vue.prototype.$store = store;

new Vue({
  el: "#app",
  store,
  router,
  components: {
    App
  }, //加载入口模板@/App.vue,与第2行对应
  template: '<App/>'
})

 Vuex_Demo1.vue 

<template>
  <div>
    <h1>Vuex实践之一</h1>
    <a @click="increment">[updateUserInfo]</a>
    <a @click="decrement">[updateCartCount]</a>
    <a @click="adda">[add]</a>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    increment() {
      //传递二个参数，形式一
      //this.$store.dispatch("updateUserInfo", "nick"); //this.$store.commit("increment", 'nick');
      //传递二个参数，形式二
      this.$store.dispatch({
        type : 'updateUserInfo',
        nickName : 'nick'
      })
      //this.$store.dispatch("updateUserInfo", {aaa: 'aaa', bbb: 'bbb'});
      //this.$store.commit("updateUserInfo" , {aaa: 'aaa', bbb: 'bbb'}) //可以运行,调用mutations中的updateUserInfo
    },
    decrement() {
      this.$store.dispatch("updateCartCount", 1); // this.$store.commit("decrement", 1);
    },
    adda(){
        //触发action
        this.$store.dispatch('increment',5); //vuex第一步,先调actions中对应的方法,
    }
  }
};
</script>

<style scoped>
a {
  cursor:pointer;
}
</style>