組合 Vuex 與 Composition API

在 Vue 3 中，Vuex 與 Composition API 的結合使用提供了更靈活的方式來管理狀態和邏輯。Composition API 將邏輯提取到獨立的函數中，而 Vuex 則負責集中式的狀態管理，這種組合可以讓狀態管理變得更加靈活且可重用。

1. Vuex 與 Composition API 的結合使用場景

當你想將 Vuex 的狀態管理與 Composition API 中的邏輯結合時，可以通過 Composition API 的 setup 函數來訪問 Vuex store 並操作它。這允許你在 Composition API 中將 Vuex 的狀態、getter、mutation 和 action 直接集成到組件邏輯中。

---

2. 如何在 Composition API 中使用 Vuex

1. 引入 Vuex Store

首先，你需要在 setup 函數中引入 Vuex store。Vue 3 中提供了內建的 useStore() 函數來訪問 Vuex 的 store。

範例：

import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();

    return {
      store
    };
  }
};

---

2. 訪問 Vuex 的 State 和 Getter

在 Composition API 中，可以通過 store.state 和 store.getters 來訪問 Vuex 的狀態和派生狀態。

範例：

<template>
  <div>
    <p>計數器：9</p>
    <p>雙倍計數：</p>
  </div>
</template>

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();
    
    // 使用 computed 包裹 Vuex 的 state 和 getter
    const count = computed(() => store.state.count);
    const doubleCount = computed(() => store.getters.doubleCount);

    return {
      count,
      doubleCount
    };
  }
};
</script>

在這個範例中，我們使用了 computed 來監聽 Vuex store 中的 state 和 getter，當這些值發生變化時，組件會自動重新渲染。

---

3. 提交 Mutation

在 Composition API 中提交 Vuex 的 mutation 和 action，你可以直接使用 store.commit 來提交 mutation。

範例：

<template>
  <div>
    <p>計數器：9</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();
    
    const count = computed(() => store.state.count);

    // 提交 mutation
    const increment = () => {
      store.commit('increment');
    };

    return {
      count,
      increment
    };
  }
};
</script>

這裡的 increment 函數用來觸發 Vuex store 中定義的 mutation。

---

4. 分發 Action

如果需要執行異步操作，可以使用 store.dispatch 來分發 Vuex 的 action。

範例：

<template>
  <div>
    <p>計數器：9</p>
    <button @click="incrementAsync">異步增加</button>
  </div>
</template>

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();

    const count = computed(() => store.state.count);

    // 分發 action
    const incrementAsync = () => {
      store.dispatch('incrementAsync');
    };

    return {
      count,
      incrementAsync
    };
  }
};
</script>

incrementAsync 會分發 Vuex 中的異步 action，然後由 action 觸發 mutation。

---

3. 將 Vuex 與 Composition API 的邏輯抽取為 Composable

你可以將與 Vuex 相關的邏輯抽取到可重用的 composable 函數 中，這樣可以在不同的組件中輕鬆共享 Vuex 的邏輯和狀態。

1. 創建 Composable 函數

首先，我們將 Vuex 的邏輯提取到一個可重用的函數中，稱之為 useCounter：

import { computed } from 'vue';
import { useStore } from 'vuex';

export function useCounter() {
  const store = useStore();

  const count = computed(() => store.state.count);
  const doubleCount = computed(() => store.getters.doubleCount);

  const increment = () => {
    store.commit('increment');
  };

  const incrementAsync = () => {
    store.dispatch('incrementAsync');
  };

  return {
    count,
    doubleCount,
    increment,
    incrementAsync
  };
}

這個 useCounter 函數將 Vuex 的狀態、getter、mutation 和 action 全部封裝進去，便於在多個組件中共享。

---

2. 在組件中使用 Composable

你可以在組件中使用這個 composable 函數來獲取 Vuex 的狀態和方法。

範例：

<template>
  <div>
    <p>計數器：9</p>
    <p>雙倍計數：</p>
    <button @click="increment">增加</button>
    <button @click="incrementAsync">異步增加</button>
  </div>
</template>

<script>
import { useCounter } from './useCounter';

export default {
  setup() {
    const { count, doubleCount, increment, incrementAsync } = useCounter();

    return {
      count,
      doubleCount,
      increment,
      incrementAsync
    };
  }
};
</script>

在這裡，我們通過 useCounter 來使用 Vuex 的狀態和邏輯，這種方式使邏輯和狀態的提取與共享更加方便。

---

4. Vuex 與 Composition API 的優勢

• 靈活性：通過 Composition API，可以將 Vuex 的邏輯提取到可重用的 composable 函數中，這樣可以在多個組件之間共享相同的邏輯和狀態。
• 結構清晰：Vuex 的狀態管理與 Composition API 的邏輯分離，讓組件的邏輯更加清晰。
• 可重用性：使用 Composition API 的 composable 函數，使得 Vuex 的邏輯更加可重用，減少了代碼重複。

---

5. 總結

• Vuex 可以通過 Composition API 的 setup 函數與組件邏輯緊密結合。
• 可以在 setup 中使用 useStore() 來訪問 Vuex store，並使用 computed 來綁定 Vuex 的狀態、getter。
• 提交 mutation 和分發 action 的操作可以直接通過 store.commit 和 store.dispatch 來完成。
• 可以將 Vuex 的邏輯提取到可重用的 composable 函數中，實現邏輯的共享與組織化管理。

這樣的結合使用讓 Vuex 與 Vue 3 的 Composition API 更加靈活，並能適應大型應用的需求。