[Vue.js] Vuex 學習筆記 (3) - 簡單應用

當我們用 vue-cli 建立好專案後,我們在 src/main.js 內修改程式碼:

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
34
35
36
import Vue from 'vue';
import Vuex from 'vuex';
import App from './App';
import router from './router';

Vue.config.productionTip = false;

Vue.use(Vuex);

//建立store
const store = new Vuex.Store({
state: {
count: 0,
},
mutations: {
increment(state) {
state.count++;
},
},
});

new Vue({
el: '#app',
router,
template: '<App/>',
components: {
App,
},
created() {
// 使用 store.state 來取得state的物件
console.log(store.state.count); // 0
// 使用 store.commit 觸發 mutation 來改變 state
store.commit('increment');
console.log(store.state.count); // 1
},
});

建立好後打開瀏覽器的 DevTools,可以在 Console 中查看到數據的變化,這樣一個簡單的 Vuex 應用就實現了

  • store :是組件中的共享狀態,而改變 state 的方法是 mutations
  • mutation :我們只能通過 mutation 來改變 state 的狀態,不能使用 store.state.count = 5 這樣的方式來修改。

    雖然這樣的方式仍然可以修改,但非常不建議這樣使用,不通過 mutation 來改變 state ,狀態不會被同步。

由於 store 中的 state 是響應式的,在組件中調用 store 中的狀態僅需要在 computed 屬性中返回即可。觸發變化也僅僅是在組件的 methods 中提交 mutation。

這邊 Vue 官方提供了一個計數範例,參考一下就可以知道 Vuex 的運作方式。