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>