iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 3
0
自我挑戰組

Vuex 學習筆記系列 第 3

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

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

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 應用就實現了

result

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

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

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

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


上一篇
[Vue.js] Vuex 學習筆記 (2) - Vuex 安裝方式
下一篇
[Vue.js] Vuex 學習筆記 (4) - state 的核心概念
系列文
Vuex 學習筆記20
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言