用 Vuex 來管理 State 資料狀態

在之前的專案中，如果碰到要資料傳遞的部份，例如是父子層關係的話，只要用 props 跟 emit 就可以解決了，而遇到同階層的關係，就用 $eventbus 來處理，不過這個方法只能處理比較簡單的資料，而且在 Vue 3 也不支援了。不怕，總是有技術可以解決問題，所以就從 state 開始來學學 Vuex 吧～

什麼是 Vuex？

Vuex 是 Vue 官方開發的一種狀態管理模式，它的設計是把所有元件的狀態集中式管理，放在一個 store 裡面。
以下是 Vuex 的處理方法：

Vuex
state ----------> 資料狀態，類似 component 中的 data
actions ---------> 跟 methods 一樣，進行非同步的行為及取得資料
getter ---------> 跟 computed 一樣，資料呈現的方式
mutations -------> 改變資料內容的方法

怎麼使用 state？

由於 State 就跟 Data 差不多概念，只是 State 是一個統一存放在 Vuex 的 Store 中的 Data，要使用的話也蠻簡單的，打開 store/index.js：

直接在 state 中建立一筆資料：

state: {
  movieTitle: 'Joker',
},

然後在需要存取的頁面中，使用 computed 來拿到 State：

computed: {
  movieTitle() {
    return this.$store.state.movieTitle;
  },
},

要怎麼確定有沒有拿到 state 呢？可以使用 Vue Devtools，如果成功的話就可以看到以下畫面：

使用 mapState 來輔助存取 state

如果一個 component 中需要大量地從 store 中存取 state 的話，這時候可以使用 mapState 來省去很多 return 的步驟：

1. 從 Vuex 中 import mapState
2. 使用 computed 調用 mapState 拿到 Vuex 的 State

import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['movieTitle']),
  },
};

接著就可以在這個頁面中使用拿到的 State，例如：

<p>{{ movieTitle }}</p>

如果在 store 中有其他 State 要調用的話，例如：

state: {
  movieTitle: 'Joker',
  movieAge: 'PG13',
},

那麼在 computed 中就可以這樣用：

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['movieTitle', 'movieAge']),
  },
};
</script>

像這樣就可以拿到從 Store 的 State

可以從 CodeSandbox看一下實際是怎麼運作的：