當我們用 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);
const store = new Vuex.Store({ state: { count: 0, }, mutations: { increment(state) { state.count++; }, }, });
new Vue({ el: '#app', router, template: '<App/>', components: { App, }, created() { console.log(store.state.count); store.commit('increment'); console.log(store.state.count); }, });
|
建立好後打開瀏覽器的 DevTools,可以在 Console 中查看到數據的變化,這樣一個簡單的 Vuex 應用就實現了
- store :是組件中的共享狀態,而改變 state 的方法是
mutations
- mutation :我們只能通過 mutation 來改變 state 的狀態,不能使用
store.state.count = 5
這樣的方式來修改。
雖然這樣的方式仍然可以修改,但非常不建議這樣使用,不通過 mutation 來改變 state ,狀態不會被同步。
由於 store 中的 state 是響應式的,在組件中調用 store 中的狀態僅需要在 computed 屬性中返回即可。觸發變化也僅僅是在組件的 methods 中提交 mutation。
這邊 Vue 官方提供了一個計數範例,參考一下就可以知道 Vuex 的運作方式。