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
- 使用 Vue CLI 的
vue create建立vue-vuex專案
- Vuex 雖然為官方 package，但預設並沒有包含在 Vue 內，因此需要選擇
Manually select features另外安裝
- 除了預設的
Babel與Linter / Formatter外，使用 space bar 選擇Vuex
- 選擇
Lint on save
- 選擇
In dedicated config files，也就是各工具有自己的 config 檔，不會全部集中在package.json
-
Save this as a preset for future projects選擇n，也就是預設不會使用 Vuex
雖然實務上會使用 Vuex，但一般測試練習時，並不會使用 Vue Router，因此不用存入預設的 .vuerc
- 建立含有 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 就會自動更新