Vue 之 Vuex

Vue CLI 已經支援 Vuex，我們可由 Vue CLI 快速建立使用 Vuex 的專案。

Version

Vue 2.5.17

Vue CLI 3.0.0

Vuex 3.0.1

由 Vue CLI 建立 Vuex

$ vue create vue-vuex

1. 使用 Vue CLI 的 vue create 建立 vue-vuex 專案

1. Vuex 雖然為官方 package，但預設並沒有包含在 Vue 內，因此需要選擇 Manually select features 另外安裝

1. 除了預設的 Babel 與 Linter / Formatter 外，使用 space bar 選擇 Vuex

1. 選擇 ESLint + Airbnb config

1. 選擇 Lint on save

1. 選擇 In dedicated config files ，也就是各 工具 有自己的 config 檔，不會全部集中在 package.json

1. Save this as a preset for future projects 選擇 n ，也就是預設不會使用 Vuex

雖然實務上會使用 Vuex，但一般測試練習時，並不會使用 Vue Router，因此不用存入預設的 .vuerc

1. 建立含有 Vuex 的 vue-vuex 專案完成

• package.json 可以看到 "vuex" : "^3.0.1" ，表示 Vuex 預設已經安裝成功

Vuex 架構解析

store.js

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {

  },
  mutations: {

  },
  actions: {

  },
});

在 src 目錄下，Vue CLI 預設已經將 store.js 寫好。

除了將 Vuex.Store export 出來外，也將 Vuex 三大部分：State、Mutation 與 Action 大架構開好了。

main.js

import Vue from 'vue';
import App from './App.vue';
import store from './store';

Vue.config.productionTip = false;

new Vue({
  store,
  render: h => h(App),
}).$mount('#app');

也將 store 放進 Vue Instance，將來我們可以使用 this.$store 方式全域存取 Store。

Vuex 版 MyCounter

假設我們現在 counter 不是存在 Component 內的 data ，而是存在 Store 內的 state ，該如何實現 MyCounter 呢 ?

store.js

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

Vue.use(Vuex);

/** state */
const state = {
  count: 0;  
};

/** mutations */
const addCount = state => statecount++;
const mutations = {
  addCount,  
};

export default new Vuex.Store({
  state,
  mutations,
});

第 7 行

state: {
  count: 0,
},

在 state 內宣告 count 為 0 。

12 行

const addCount = state => statecount++;

Vuex 規定 state 內的變數無法直接修改，要透過 mutations 內的 method 才能修改。

宣告 addCount() ，第一個參數為 state ，Vuex 會傳入整個 state 物件，包含 state 內所有變數。

對 state.count++ 。

13 行

const mutations = {
  addCount,  
};

組合 mutations object。

App.vue

<template>
  <div id="app">
    <h1>{{ count }}</h1>
    <button @click="addCount">+</button>
  </div>
</template>

<script>

/** computed */
const count = function() {
  return this.$store.state.count;
}
    
const computed = {
  count,
}

/** methods */
const addCount = function() {
  this.$store.commit('addCount');    
};

const methods = {
  addCount,    
};
    
export default {
  name: 'app',
  computed,
  methods,
};
</script>

第 1 行

<template>
  <div id="app">
    <h1>{{ count }}</h1>
    <button @click="addCount">+</button>
  </div>
</template>

由於我們希望 Store 內的 state 只要被修改，HTML Template 就能自動更新，所以在使用 Vuex 時，會搭配 computed ，其中 count 就是 computed 。

11 行

const count = function() {
  return this.$store.state.count;
}

count() 直接使用 this.$store 存取 state.count 。

因為在 main.js 已經將 Store 放進 Vue Instance，所以可以使用 this.$store 使用 Store

20 行

const addCount = function() {
  this.$store.commit('addCount');    
};

呼叫 Store 下 Mutation 的 addCount() 。

使用 this.$store.commit() ，傳入 mutation 名稱。

Conclusion

• 這就是最簡單的 Vuex，將變數從 Component 的 data 改存到 Store 的 state ，並且只能透過 Store 下 muation 的 method 才能修改變數
• 使用 Vuex 的 state 時，都會改用 computed ，如此 Store 的 state 只要一變動，Component 就會自動更新

Sample Code

完整的範例可以在我的 GitHub 上找到