关于 Vue 的状态管理的一点困惑

背景：Vue 版本 2.7 ，2 到 3 人的小项目，不使用 composition api ，不使用 SSR

目的：只是想要响应式的全局变量

关于 Vuex ，一个常见的说法是"大项目更需要，小项目不必强行用"，我的问题是：

1.Pinia 仍然适用这个说法吗？还是说 Pinia 因为更简单所以无脑上？

2.如果嫌啰嗦不想用 Vuex 的话，可以用什么？很多地方包括 Vue 2 的文档提到 Event Bus 模式，但我也看到很多博客和论坛包括 Vue 的 Core Team 开发者都强烈反对这一模式。其中一个原因是说，Event Bus 没有一个中心化的 state ，而是用事件的发布 /订阅来同步数据，因此难以维护。

问题来了，Event Bus 为什么不用中心化的 state ？或者说，为什么不是 Data Bus 而是 Event Bus ？我的意思是：

// bus.js
const bus = new Vue({
  data () {
    count: 1
  }
})
Vue.prototype.$bus = bus

// App.vue
<template>
  <div>
    {{ $bus.count }}
    <button @click="$bus.count++">Add</button>
  </div>
</template>

这样写我试了一下是可以的，数据也是响应式的，我觉得似乎是一个很自然的想法？但是为什么搜不到任何相关的讨论，甚至不知道这个模式有没有名字（类似 Event Bus ）？还是说有什么我没看到的原因导致不能这样写？

问的有点乱，简单说就是用一个 Vue 实例来充当 Store 是不是反模式？

tomieric

2022-09-16 10:42:52 +08:00

vue2 还有 observale ，经常有小型的 vuex 效果，在 SFC 中用 computed 获取 state

```js
export default function(config = {}) {
const store = {
state: {
...config
},
actions: { },
mutations: {
validate (state, { row, prop, validate, messages }) {
},
},
commit: (key, value) => {
if (store.mutations[key]) {
store.mutations[key](store.state, value);
} else {
throw new Error(`mutations: ${key} 未定义`);
}
},
dispatch: async (key, value) => {
if (store.actions[key]) {
const result = await store.actions[key](
{
state: store.state,
commit: store.commit,
dispatch: store.dispatch
},
value
);
return Promise.resolve(result);
} else {
throw new Error(`actions: ${key} 未定义`);
}
}
};

return Vue.observable(store);
}

```

yaphets666

2022-09-16 13:57:40 +08:00

@shintendo 如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex 。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是：

Flux 架构就像眼镜：您自会知道什么时候需要它。

前端 2-3 个人，这应该不符合“你的应用够简单”这个条件吧。。。