Justnote

這篇文章記錄一下目前在 VSCode 中使用到的擴充插件

Veux 最大的好處在於可以將原先獨立於各原件中的行為統一放到 store 中管理，並提供其他原件取用，但當專案變大時，如果所有的行為都放到同一支檔案中管理，這隻檔案將會變得非常龐大，因此 Vuex 提供了模組化的方式來拆分其中的行為

在先前有提到，store 中有一個類似原件中的 computed 的方法叫做 getters，當有多個原件要用到這個屬性時，可以將其放到 store 中供其他原件使用，同樣會在其依賴的值發生變化時重新計算

當我們要從元件傳遞參數到 actions 時，如果原先在元件中的事件就有一個以上的參數，則第二個以後的參數就會出現 undefined

1
2
3
4
5
6
7
8
9
10
11

// in component
addtoCart(id, qty = 1) {
  this.$store.dispatch('addtoCart', id, qty);
}

// in store
actions: {
  addtoCart(context, id, qty) {
    console.log(context, id, qty);   // '預設 context 內容' 'id' undefined
  }
}

物件形式傳遞多個參數

如果原先事件就有一個以上的參數，就可以透過物件 {} 的形式將所有參數包起來傳遞，再透過 “解構” 的方式取出參數

1
2
3
4
5
6
7
8
9
10
11

// in component
addtoCart(id, qty = 1) {
  this.$store.dispatch('addtoCart', { id, qty });
}

// in store
actions: {
  addtoCart(context, { id, qty }) {
    console.log(context, id, qty);   // '預設 context 內容' 'id' 'qty'
  }
}

Vuex 最大的特色就是可以將 “重複” 使用到的變數與方法統一放到 store 來管理，而其管理的流程是透過元件來呼叫 actions 來觸發 “非同步” 的事件，再透過 commit 呼叫 mutations 中的同步事件來改變 state 中的資料狀態，進而影響畫面的呈現