Vuex 計數器範例 - 2

今天來把昨天的計數器的範例整理成正確的資料結構，如果你還沒完成昨天的範例的話，建議先完成一下，今天的內容才會比較看得懂唷！

物件展開運算符

不過在看範例前，先補充一個小知識，就是物件展開運算符，後面會使用到不過因為計數器的內容並沒有很複雜，所以我只會例舉一個當作示範而已唷！

首先要先了解一下 modules 的概念，因為大型專案的資料內容通常很多且複雜，所以我們將會做模組化的資料運用，將相關的資料放在一起方便管理，包括 state、actions、mutations，但是計數器只有一種行為而已，所以我就將他全部集中到 count.js 的檔案內。

這裡我將所有相關行為及資料都集中到同一個檔案內做管理。

//src/store/modules/count.js

const state = {
  count: 1
}
const actions = {
  incrementCount(context, counting) {
    context.commit('INCREMENT_COUNT', counting)
  }
}
const mutations = {
  INCREMENT_COUNT(state, counting) {
    state.count += counting
  }
}

export default {
  namespaced: true, //避免命名衝突
  state,
  actions,
  mutations
}

//src/store/count/index.js

import count from './count';

export default {
  count
}

將 modules 內的資料 import 到 index.js 內並啟用。

//src/store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import modules from './modules'

Vue.use(Vuex)

export default new Vuex.Store({
  modules
})

這裡只有做一些微小的修改。

//src/components/HelloWorld.vue

<script>
//mapState 可以方便我們獲取多個狀態
import { mapState } from 'vuex'
export default {
  name: "HelloWorld",
  data() {
    return {
      counting: 10
    };
  },
  methods: {
      increase() {
        this.$store.dispatch('count/incrementCount', this.counting) 
        //因為 namespaced 的關係，所以需要加一下前綴
      }
  },
  computed: {
    ...mapState({
      count: state => state.count.count
    })
  }
};
</script>

這樣就完成囉！
不過因為資料內容不夠多、不夠複雜，所以可能會覺得沒什麼必要用到 Vuex，甚至會有點多餘，不過如果是在大型專案上使用的話，就會覺得相當好管理唷！

後記

30 天就這樣結束了，整理了之前的筆記後發現有些觀念還是不太熟悉，所以又再研究了一番，並且在這段時間又提高了對 Vue 的掌握度，如果我的內容有錯誤請不吝指教，謝謝大家。