Vuex 是 Vue 的一个状态管理模组，介于后端 fetch 与前端 render 的中间，方便先对后端取回的数据进行初步的整理。由于 Vuex 的写法、用法因人而异而且差异会很大，所以特此说明本前端使用 Vuex Module 的方式

Vuex 目录结构

src/
├── services/
│   └── notion.service.js
└── store/
    ├── index.js
    ├── notion.module.js
    └── wallet.module.js

本 repository 以两个资料夹 services 与 store 分别管理 vuex module

1. 每一个 vuex module 应被命名为 xxxx.module.js 并放在 store 底下
2. 对于不同的后端网址 (例如 notion, google calendar) 在 services 底下操作 axios
3. 在 module.js 中引入特定的 service 来与特定的后端进行 GET/POST 互动

Module 写法

本 Repository 采用比较进阶的写法，透过宣告并 export 大写的保留字来操作 vuex 的 Getters, Setters 与 Actions

// import service 与 data, config 使用
import NotionService from '@/services/notion.service';
import notionDB from '@/data/notiondb';

// Action, Setters, Getter 大写字依序宣告
// Actions
export const FETCH_NOTION_DATA = 'fetchNotionData'; <<<<<<<<<<<<<< 这里

// Setters
export const SET_NOTION_DATA = 'setNotionData'; <<<<<<<<<<<<<<<<<< 这里

// Getters
export const GET_NOTION_DATA = 'getNotionData'; <<<<<<<<<<<<<<<<<< 这里

// State 设定
const state = {
    ...
};

// Getter 设定
const getters = {
    [GET_NOTION_DATA](state) {　<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< 这里
       ....
    },
};

// Action 设定
const actions = {
    [FETCH_NOTION_DATA](context, name) { <<<<<<<<<<<<<<<<<<<<<<<<< 这里
        ...
    }
};

// Mutation 设定
const mutations = {
    [SET_NOTION_DATA](state, notionData) { <<<<<<<<<<<<<<<<<<<<<<< 这里
        ...
    },
};

export default {
    state,
    actions,
    mutations,
    getters,
};

在 .vue 中如何使用

getters, mutations 都是依照一般的使用方式，关于 Action 可以透过大写字来以 dispatch 呼叫：

// AppHeader.vue

// import 大写字
import { mapGetters, mapActions } from "vuex";
import {
  ...
  CONNECT_WALLET,  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< 这里
} from "@/store/wallet.module";

// 透过 dispatch 使用
setWallet(data) {
      this.isConnecting = false;
      this.$store.dispatch(CONNECT_WALLET, data); <<<<<<<<<<<<<<<<<< 这里
    },

...
// 透过 mapActions 注册
computed: {
    ...mapGetters([...]),
    ...mapActions([CONNECT_WALLET]),
  },