---
tags: Mike課程
---

# Vuex 狀態管理架構

### vuex 流程圖


Vuex 所使用的有：

### ==State==
用來存放狀態值

### ==Getters==
用來在外部取得State中的值

### ==Mutations==
對State發起Mutate，更動State中的值

### ==Action==
對Mutation提交commit後，執行對象的Mutate

# State 與 Getters

### 引入 useStore

import { useStore } from "vuex";

* 若你先定義一個State資料

 state: {
    isOpen:false,
  },

* 引入後 useStore 後


* getters 取得了state的值

 getters:{
    isOpen(state){
      return state.isOpen;
    }
  },


* 我們綁定template模板進行雙向綁定切換動作

 <div :class="['menu', { open: store.getters.isOpen }]">
    <a class="closeBtn" @click="handClickMenu">

* 使用 computed 從新包裝計算

    // 重新計算
    const hasClickMenu = computed(() => {
      return store.getters.isOpen;
    });

* 再次傳入template

<template>
  <div :class="['menu', { open: hasClickMenu }]">
    <a class="closeBtn" @click="handClickMenu">

### mutations
* mutations 本身的值為


* mutations 定義一個函式做為更改 state的值

 mutations: {
    hasMenuOpen(state){
      state.isOpen = true;
    }
  },

### actions

* 執行對 mutations 進行commit 提交動作

  actions: {
    addOpenHasMenu(context){
      context.commit('hasMenuOpen')
    }
  },

* 自訂義 dispatch 對 actions觸發事件

import { useStore } from "vuex";
export default {
  setup() {
    const store = useStore();
    const handClickMenu = () => {
        //對 actions 觸發函式事件
      store.dispatch("addOpenHasMenu");
      console.log(store);
    };

    return { handClickMenu };
  },
};