Vuex 是一個專為 Vue.js 設計的狀態管理工具。它能幫助我們在不同組件間共享和管理應用程式的狀態。這篇文章將介紹如何在 Vue 3 中安裝和使用 Vuex，並通過一個簡單的計數器示例來說明其用法。

1. 簡單介紹

Vuex 通過一個集中式的 store 管理應用的狀態，所有的狀態變更都是通過提交 mutations 來完成的。這使得狀態的變更可追蹤且易於調試。Vuex 的主要組成部分包括：

• State：應用的狀態數據。
• Mutations：改變狀態的同步函數。
• Actions：可以執行異步操作，並最終提交 mutations。
• Getters：從狀態中派生出來的狀態。

2. 安裝 Vuex

首先，我們需要在 Vue 3 項目中安裝 Vuex。打開終端，輸入以下命令：

npm install vuex@next --save

3. 創建 Vuex Store

在 src 目錄下創建一個 store 文件夾，並在其中創建 index.js 文件，配置 Vuex：

// src/store/index.js
import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      count: 0
    }
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    },
    decrement({ commit }) {
      commit('decrement')
    }
  },
  getters: {
    count(state) {
      return state.count
    }
  }
})

export default store

這裡我們定義了一個簡單的狀態 count，以及兩個 mutations increment 和 decrement 來修改這個狀態。還定義了兩個 actions 和一個 getter。

4. 在 Vue 3 中使用 Store

在 src/main.js 文件中，引入並使用我們剛創建的 store：

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

createApp(App).use(store).mount('#app')

5. 在組件中使用 Vuex 狀態

接下來，我們在一個組件中使用 Vuex 來管理狀態。創建一個新組件 src/components/Counter.vue：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['increment', 'decrement'])
  }
}
</script>

在這個組件中，我們使用 mapState 將 Vuex store 中的狀態映射到組件的計算屬性中，並使用 mapActions 將 actions 映射到組件的方法中。

6. 在主應用中使用組件

最後，在 src/App.vue 文件中使用這個計數器組件：

<template>
  <div id="app">
    <Counter />
  </div>
</template>

<script>
import Counter from './components/Counter.vue'

export default {
  components: {
    Counter
  }
}
</script>

這樣，我們就完成了一個簡單的 Vuex 狀態管理示例。在這個示例中，我們創建了一個 Vuex store，並在組件中使用它來管理和操作應用的狀態。通過這種集中化的狀態管理方式，我們可以更輕鬆地管理應用中的數據流和狀態變更。

希望這篇文章能幫助你更好地理解和使用 Vuex 來管理 Vue 3 應用中的狀態。