如何在 Vue 3 中使用組合式 API 與 Vuex 進行狀態管理的詳細教程。

安裝 Vuex

首先，在你的 Vue 3 項目中安裝 Vuex。可以使用 npm 或 yarn：

npm install vuex@next --save
# or
yarn add vuex@next

創建 Store

在 Vue 3 中，你可以使用 createStore 函數來創建 Vuex Store。通常我們會在項目的 src 目錄下創建一個 store 文件夾，并在其中創建一個 index.js 文件：

// src/store/index.jsimport { createStore } from 'vuex';const store = createStore({state() {return {count: 0};},mutations: {increment(state) {state.count++;}},actions: {increment({ commit }) {commit('increment');}},getters: {doubleCount(state) {return state.count * 2;}}
});export default store;

在 Vue 應用中使用 Store

在你的 Vue 應用中，你需要將創建的 Store 實例傳遞給 Vue 應用。通常在 main.js 文件中進行：

// src/main.jsimport { createApp } from 'vue';
import App from './App.vue';
import store from './store';const app = createApp(App);app.use(store);app.mount('#app');

使用 State

你可以在組合式 API 中通過 useStore 函數來訪問 Vuex Store：

<template><div><p>{{ count }}</p></div>
</template><script>
import { computed } from 'vue';
import { useStore } from 'vuex';export default {setup() {const store = useStore();const count = computed(() => store.state.count);return {count};}
};
</script>

使用 Getters

同樣，你可以在組合式 API 中使用 useStore 函數來訪問 Vuex Getters：

<template><div><p>{{ doubleCount }}</p></div>
</template><script>
import { computed } from 'vue';
import { useStore } from 'vuex';export default {setup() {const store = useStore();const doubleCount = computed(() => store.getters.doubleCount);return {doubleCount};}
};
</script>

提交 Mutations

你可以在組合式 API 中通過 useStore 函數來提交 Vuex Mutations：

<template><div><p>{{ count }}</p><button @click="increment">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);const increment = () => {store.commit('increment');};return {count,increment};}
};
</script>

分發 Actions

你可以在組合式 API 中通過 useStore 函數來分發 Vuex Actions：

<template><div><p>{{ count }}</p><button @click="increment">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);const increment = () => {store.dispatch('increment');};return {count,increment};}
};
</script>

模塊化 Store

當應用變得非常復雜時，可以將 store 分割成模塊（module）。每個模塊擁有自己的 state、mutation、action 和 getter，甚至可以嵌套子模塊：

// src/store/index.jsimport { createStore } from 'vuex';const moduleA = {state() {return {count: 0};},mutations: {increment(state) {state.count++;}},actions: {increment({ commit }) {commit('increment');}},getters: {doubleCount(state) {return state.count * 2;}}
};const store = createStore({modules: {a: moduleA}
});export default store;

訪問模塊中的 State

在組合式 API 中，你可以通過模塊名來訪問模塊中的 state 和其他屬性：

<template><div><p>{{ count }}</p></div>
</template><script>
import { computed } from 'vue';
import { useStore } from 'vuex';export default {setup() {const store = useStore();const count = computed(() => store.state.a.count);return {count};}
};
</script>