當說到大型前端應用時，通常會提到兩個跨平臺狀態管理庫：MobX和VueX。雖然他們有著不同的背景和設計哲學，但兩個庫都明確了其目標：使得復雜的應用復雜化。

在 MobX 中，你可以通過 decorator 的方式將被觀察的狀態和響應式函數托管到 Store 中。然后，你可以在應用程序中連接它們，以便使它們與組件保持同步，并自動在您對狀態進行修改時更新 UI。

import { observable, action } from 'mobx';
class TodoStore {
@observable todos = [];
@action addTodo(todo) {
this.todos.push(todo);
}
}
const store = new TodoStore();

而在 Vue 中，你可以使用 store 實例來中心化管理共享狀態，并使用 mapState、mapGetters、mapActions 和 mapMutations 輔助函數來簡化你對 store 的訪問。然后，你可以在組件中使用這些函數，以便短時間內更輕松地編寫您的應用程序。

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
todos: []
},
mutations: {
addTodo(state, todo) {
state.todos.push(todo);
}
},
actions: {
addTodo
}
});
export default store;

雖然他們的工作方式不同，但兩個庫都提供了使得狀態和組件之間的通信前所未有地簡便。

無論你選擇使用 MobX 或 VueX，你都將擁有一種簡便的工具，幫助你更有效地編寫復雜的應用程序。