---
# System prepended metadata

title: Vuex 狀態管理架構
tags: [Mike課程]

---

---
tags:  Mike課程
---

# Vuex 狀態管理架構

### vuex 流程圖

![](https://i.imgur.com/pZg0UtJ.png)


Vuex 所使用的有：

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

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

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

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

# State 與 Getters

### 引入 useStore

```javascript=
import { useStore } from "vuex";
```
* 若你先定義一個State資料

```javascript=
 state: {
    isOpen:false,
  },
```


* 引入後 useStore 後

![](https://i.imgur.com/ZdD5edv.png)

* getters 取得了state的值
```javascript=
 getters:{
    isOpen(state){
      return state.isOpen;
    }
  },
```
![](https://i.imgur.com/Gzzk5xU.png)

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

```htmlembedded=
 <div :class="['menu', { open: store.getters.isOpen }]">
    <a class="closeBtn" @click="handClickMenu">
```
* 使用 computed 從新包裝計算

```javascript=
    // 重新計算
    const hasClickMenu = computed(() => {
      return store.getters.isOpen;
    });
```
* 再次傳入template

```htmlembedded=
<template>
  <div :class="['menu', { open: hasClickMenu }]">
    <a class="closeBtn" @click="handClickMenu">
```
### mutations
* mutations 本身的值為

![](https://i.imgur.com/6nyWEp0.png)

* mutations 定義一個函式做為更改 state的值
```javascript=
 mutations: {
    hasMenuOpen(state){
      state.isOpen = true;
    }
  },
```

### actions

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

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

* 自訂義 dispatch 對 actions觸發事件

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

    return { handClickMenu };
  },
};
```