Vuex 基本核心概念筆記 [02]

Vuex 主要的核心概念

• state：存放所有共享資料的地方。
• actions：處理非同步。
• mutations：用於變更 store 的資料數據，還能集中監控所有數據的變化。
• getter：只進行包裝數據。

• state，驅動應用的數據源；
• view，以聲明方式將 state 映射到視圖；
• actions，響應在 view 上的用戶輸入導致的狀態變化。

元件使用 state 資料的方式

1.

this.$store.state.資料名稱

2.

1
2
3
4
5

import { mapState } from 'vuex'

computed: {
  ...mapState(['資料名稱'])
}

在 Vuex 當中，不允許在元件直接修改 Vuex 的數據，這樣不易於之後的維護。

要用 mutations 來傳遞。

1
2
3
4
5
6

// 錯誤示範
methods: {
  add() {
    this.$store.state.count += 1
  }
}

調用 mutations

觸發 mutations ：commit

調用 mutations 有以下方式：
1.

this.$store.commit('mutations 函式')

commit 的作用就是調用某個 mutations 函式

2.

1
2
3
4
5

import { mapMtations } from 'vuex'

methods: {
  ...mapMtations(['mutations 函式', 'mutations 函式'])
}

不要在 mutations 函式當中執行非同步。
如果要執行非同步，要用 action 來處理。

1
2
3
4
5
6
7
8

// 錯誤示範
mutations: {
  add() {
    setTimeout({
      state.count += 1
    },1000)
  }
}

actions 處理非同步

觸發 actions ：dispatch

actions 只負責執行非同步操作，但在 actions 當中，不可以直接修改去 state 的數據。
必須透過 context.commit 來觸發 mutations 的函式。

使用 actions 方式：

1.
this.$store.dispatch('addAsync 函式')

2.

1
2
3
4
5

import { mapActions } from 'vuex'

methods: {
  ...mapActions(['actions 函式', 'actions 函式'])
}

getter

觸發 getters ：getters

getter 用於對 store 中的數據進行加工處理形成新數據。getter 只進行包裝數據，並不會修改到 store 中的數據。如果 store 中的數據發生變化，那麼 getter 包裝出來的新數據也會出現變化。

使用 getters 的方式：

1.
this.$store.getters.getter名稱

2.

1
2
3
4
5

import { mapGetters } from 'vuex'

computed: {
  ...mapGetters(['actions 函式', 'actions 函式'])
}