DAY12: Nuxt.js 中的狀態管理（Vuex）

什麼是狀態管理？

簡單來說，應用程序的狀態是指應用程序中的數據，例如用戶信息、設置、購物車內容等等。當應用程序變得複雜時，有效管理這些數據變得至關重要。

Vuex 簡介

在 Nuxt.js 中，我們可以使用 Vuex 來管理應用程序的狀態。Vuex 是一個專門為 Vue.js 應用程序設計的狀態管理庫，但它與 Nuxt.js 集成得非常好。

創建一個 Vuex 存儲

Nuxt.js 項目中，創建一個名為 store 的文件夾，然後在其中創建一個 index.js 文件。

// store/index.js

export const state = () => ({
  count: 0,
});

export const mutations = {
  increment(state) {
    state.count++;
  },
  decrement(state) {
    state.count--;
  },
};

在組件中使用 Vuex

讓我們在一個組件中增加計數器的值：

<!-- 在組件中使用 Vuex -->

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="incrementCount">增加</button>
    <button @click="decrementCount">減少</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    },
  },
  methods: {
    incrementCount() {
      this.$store.commit('increment');
    },
    decrementCount() {
      this.$store.commit('decrement');
    },
  },
};
</script>

我們使用 computed 屬性綁定了計數器的值，並使用 this.$store.commit 來調用 mutations。