Vuex 計數器範例

相信昨天介紹完了 Vuex 後還是會有很多人不知道該如何使用，今天就用實際範例來介紹 Vuex 究竟該如何使用，直接看下面的範例吧！

安裝 Vuex

首先，先用 npm 來安裝 Vuex。

npm install vuex --save

再來要在 main.js 啟用 Vuex，並且先 import 我們等一下會建立的 store 資料夾。

//src/main.js

import Vue from "vue";
import Vuex from 'vuex';
import App from "./App";
import store from './store';

Vue.use(Vuex);
Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: "#app",
  components: { App },
  template: "<App/>",
  store
});

然後我們再到 src 底下建立 store 的資料夾，並在裡面建立 index.js 的檔案，並在裡面先做基本的配置。

//src/store/index.js

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

Vue.use(Vuex);

export default new Vuex.Store({
  
})

到目前為止，基本配置已經差不多了，接下來就來實做一個計數器。

//src/components/HelloWorld.vue

<template>
  <div class="hello">
    <p>{{count}}</p>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      counting: 10
    };
  },
  computed: {
    count() {
      return this.$store.state.count
    }
  },
};
</script>

//src/store/index.js

export default new Vuex.Store({
  state: {
    count: 1
  },
})

這時就可以正確顯示預設的數字在頁面上囉！
再來我們可以新增一個按鈕，但在事件的處理上會和原本元件的方式不太一樣。

//src/components/HelloWorld.vue

<template>
  <div class="hello">
    <p>{{count}}</p>
    <button @click="increase">Click Me</button>
  </div>
</template>

<script>

export default {
  name: "HelloWorld",
  data() {
    return {
      counting: 10
    };
  },
  computed: {
    count() {
      return this.$store.state.count
    }
  },
  methods: {
    increase() {
      this.$store.dispatch('incrementCount', this.counting)
    }
  }
};
</script>

這裡我們不在 methods 裡直接計算，而是利用 dispatch 的方式觸發 actions 裡的事件。

//src/store/index.js

export default new Vuex.Store({
  state: {
    count: 1
  },
  actions: {
    incrementCount(context, counting){  //context 後方可以帶入要傳入的參數，如果沒有參數可以省略。
      context.commit('INCREMENT_COUNT', counting)
    }
  },
  mutations: {
    INCREMENT_COUNT(state, counting) {  //state 後方可以帶入要傳入的參數，如果沒有參數可以省略。
      state.count += counting
    }
  }
})

actions 的事件被觸發後，會靠 commit 去呼叫 mutations 裡的方法，並且在 mutations 去改變 state 裡的資料內容，這時就可以正確地增加計數器的數字囉！

雖然可以正常運作，但是這樣的配置方式並不理想！這只是先方便讓大家閱讀並理解而已，明天我們來將它改為正確的配置。

那麼，明天再見囉！