# Should use Vuex in Vue3 ?

Vuex 作為全域的狀態管理器，在 Vue2上已經是不可或缺的存在。

## Vuex

新版 Vuex4 兼容 Vue3 ，並承襲了所有特性，邏輯與實作並沒有與前代有太多的差異，是讓人無縫接軌的好套件，並能夠帶來效能與規範統一的優點

### Why Vuex can bring performance ?

Vuex 帶來的效能存在於規範之中。在前幾名現代前端框架中，two way binding 已是基本功能，當資料變動，UI隨即渲染。當資料頻繁異動時就會壓力山大了，當然各框架也是做了很多事情例如 virtual dom 來減少類似的事情發生。

雖然減少了渲染的消耗，但卻沒有阻止資料始終被頻繁更動的狀況，因此 Vuex 制定了 action 做完事情才去使用 mutate 更新 state 這個資料流，這就是規範帶來的好處。
但 Vuex 也有一些個人覺得不順手的地方

### Key is String

使用 Typescript 的同學比較有感，不管是 mutation 的 commit 又或者 action 的 dispatch 調用都是使用 string 去傳遞要執行的方法。

store.commit('increment');
store.dispatch('increment')

甚至是官方給出了，看似方便的 mapState 到 mapMutations 與 mapActions
都是使用 string 做為 key 值對應要呼叫的方法，並非直接呼叫 state, mutate, action 本身，薄弱的 references 無法做出強型別的優勢。

export default {
    methods: {
        ...mapActions([
            'increment', // map `this.increment()` to `this.$store.dispatch('increment')`
        ])
    }
}

Typescript 的朋友，推薦 vuex-module-decorators 一個用 class 來寫 vuex 的套件，上手要一點成本，部分會有小陷阱。但能夠直接呼叫方法並且對應 type 真心好用阿! 推推

### Module

Module 是 Vuex 中我很愛用的功能，對於有整理控的我來說，把各項功能分門別類就像洗完澡一樣的清爽，但僅限一層

Module 本身允許 Nested 結構，看似能夠方便的將功能拆分的更細，但真正的專案實戰應避免過度複雜的結構造成維護上的困難。

並且 Module 可以是 `no namespace`，這甚至是預設值，如果你沒有特別設定 `namespace: true`，那麼你的 `getter`，`mutate` 等，將會電梯上樓直到 `namespace` 或 `root` ，你還會記得三個月前那次搭電梯到哪一樓了嗎?

### How about Provide & Inject

Vue 使用了 Provide & Inject 支援深層資料注入，大多使用在獨立且不依賴 vuex 的 Parent-Child 結構上。但在App開發卻很少會被使用
1. Inject 維護上，來源較不易定位，因為 Provide 可來自任何上層元件
2. 命名衝突的問題 (可用 Symbol 解決)
3. 就有 vuex 了，是在 hello ?

## Vue3 Composition API
時代來到了 Vue3 搭上了 hooks 風潮，Composition API 終於亮相

import { reactive } from 'vue';

export const fooBar = reactive({ foo: 'bar' });

### Composition (組合式) API
舉個例子 reactive
之後可以在任何 .vue 內存取或者改動這個 fooBar ，並且資料也會被正確渲染。而且 ref computed 也都能做類似的操作，可以看做直接放到了全域上了。

### Composition API is Vuex killer?

這是開始使用 Vue3 後一直在找尋的答案，閱讀過國內外的文章，看到的是認為可以取代的發文偏多。

自己目前是傾向於不直接使用原生 Vuex，而是設計類似結構且 Base on Composition API 的套件來取代，畢竟是要給團隊一起用的，有規範才能夠確保一定的效能與維護性。

npm install @wowissu/vux

不需要寫太多的 interface，並且可 direct access key & methods from store instance。目前實現了 state, getter, mutate, action 等功能，但不打算實現 module in module，畢竟都是 Composition API 了，建立 Nested 結構不是非常必要。

如果覺得有那裡可以改進，歡迎在 issue 上留言給我。
或是覺得好用，就送顆星星吧!