最簡單的 Vuex

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

Version


Vue 2.5.17
Vue CLI 3.0.0
Vuex 3.0.1

由 Vue CLI 建立 Vuex


1
$ vue create vue-vuex

vuex000

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

vuex001

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

vuex002

  1. 除了預設的 BabelLinter / Formatter 外,使用 space bar 選擇 Vuex

vuex003

  1. 選擇 ESLint + Airbnb config

vuex004

  1. 選擇 Lint on save

vuex005

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

vuex006

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

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

vuex007

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

vuex009

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

Vuex 架構解析


store.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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

1
2
3
4
5
6
7
8
9
10
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 呢 ?

vuex010

store.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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 行

1
2
3
state: {
count: 0,
},

state 內宣告 count0

12 行

1
const addCount = state => statecount++;

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

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

state.count++

13 行

1
2
3
const mutations = {
addCount,
};

組合 mutations object。

App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<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 行

1
2
3
4
5
6
<template>
<div id="app">
<h1>{{ count }}</h1>
<button @click="addCount">+</button>
</div>
</template>

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

11 行

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

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

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

20 行

1
2
3
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 上找到

2018-11-18