DAY9：Nuxt.js的狀態管理

探索狀態管理

狀態管理是一個關鍵概念，它允許我們有效地管理應用程序的數據和狀態

使用Vuex

要在Nuxt.js中實現狀態管理，我們通常使用Vuex，這是一個官方支持的狀態管理庫。我們可以在Nuxt.js項目中輕松集成Vuex，並使用它來管理應用程序的狀態。

// 創建 store/index.js 文件
import Vuex from 'vuex'

const store = () => {
  return new Vuex.Store({
    state: {
      count: 0
    },
    mutations: {
      increment(state) {
        state.count++
      }
    }
  })
}

export default store

我們創建了一個簡單的Vuex存儲，其中包含一個名為"count"的狀態和一個名為"increment"。

使用狀態

我們可以在我們的頁面和組件中使用它。這讓我們可以輕松地在應用程序的各個部分共享數據。

<!-- 在組件中使用狀態 -->
<template>
  <div>
    <p>Count: {{ $store.state.count }}</p>
    <button @click="$store.commit('increment')">增加</button>
  </div>
</template>

我們在組件中使用了狀態"count"，並且當按下按鈕時調用了"increment"。