狀態管理有點像是 cookie 或 localStorage，可是又多了更多操作可以用，讓你再切換頁面時可以使用相同的變數。

用來使用這個功能的套件叫做 vuex ，其實還有更新的套件啦，叫做 pinia，我之前簡單看了一下，感覺是大同小異啦，所以就沒去學，如果各位發現其實好用太多了，歡迎留言告訴我喔

以下不是狀態管理全部的功能，但是我覺得最常在用的其實就是這些

state

首先先來定義一個可以在各個網頁頁面取用的變數吧

所有的狀態管理設定都是寫在 src/store/index.ts

在 state 裡面定義變數

state: {
  variable1:'hello',
  variable2:'world',
}

在 state 裡面定義的變數就可以在各個網頁頁面使用

mutation

再來定義一個可以改變 state 裡面變數的值的方法，方法要寫在 mutations 內

mutations: {
    setVariable1 (state,newValue) {
      state.variable1 = newValue
    },
},

方法的第一個參數是代表狀態管理裡面的 state，第二個參數之後就看你怎麼玩，像我這裡是寫一個方法，state 內的 variable1 會被改變成方法的第二個參數

How to use

接下來講如何在 vue 頁面使用狀態管理

<script lang="ts" setup>
import { computed } from 'vue'
import { useStore } from 'vuex'
const store = useStore()

// 從狀態管理中獲得 variable1
const variable1=computed(()=>store.state.variable1)

// 改變狀態管理中 variable1 的值
store.commit('setVariable1','go go')    
</script>

首先要從 vuex 中引入 useStore，然後從 vue 中引入 computed，然後要取用狀態管理中的值要像這樣

const variable1=computed(()=>store.state.variable1)

用 computed 函數回傳 store.state.變數

如果想要改變狀態管理中的變數

store.commit('setVariable1','go go')

用 store.commit 這個函數，第一個參數是你之前在 src/store/index.ts 中 mutations 內寫的方法，然後第二個參數就是 setVariable1 的第二個參數