vuex并不能让跨组件变得更简单和方便,反而会让他变复杂。
官网都说,如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。
很多应用都用不到Vuex,如无必要,勿增实体。

至于跨组件方案,你其实有一大堆方法可以用,我可以列举几个,并说明利弊:

Vue实例:

你可以声明一个Vue实例,命名为store,然后利用其data和methods管理数据。

  1. export const store = new Vue({
  2. data: { count: 0 },
  3. methods: {
  4. add() {
  5. this.count++;
  6. }
  7. }
  8. });

然后在需要的组件内,通过computed获取数据,直接调用methods更新数据:

  1. import { store } from "../App";
  2. export default {
  3. computed: {
  4. count() {
  5. return store.count;
  6. }
  7. },
  8. methods:{
  9. add(){store.add()}
  10. }
  11. }

Vue event bus:

  1. const $eb = new Vue()
  2. $eb.$emit('change')
  3. $eb.$on('change',//...)

LocalStorage & Cookie & indexedDB:

浏览器有的东西,为什么不用?

Provider/Inject:

  1. export default {
  2. provide() {
  3. return {
  4. reactive: this.reactive
  5. };
  6. },
  7. data() {
  8. return {
  9. reactive: {
  10. value: "Hello there"
  11. }
  12. };
  13. }
  14. };

利弊分析如下:

  1. 所有上述方案的调试支持都不强,功能复杂之后测试调试困难。
  2. 所有上述方案横向扩展能力都很差。
  3. eventbus需要取消订阅,频繁调用容易内存泄漏。
  4. LocalStorage Cookie需要频繁地序列化反序列化。
  5. indexedDB注册繁琐,用户不一定开放,操作繁琐。
  6. Provider/Inject响应式需要组件提供,其他编译条件下可能获取不到this。

由此可知,什么情况下,Vuex才是必须的?

  1. 需要对共享数据和行为进行拆分;
  2. 复杂的异步逻辑,需要综合多个模块进行状态演进,有详细的调试信息;
  3. 需要用到第三方插件;
  4. 由于由全局唯一数据源,方便进行跨平台,SSR中类似NUXT采用Vuex进行前后端数据同步。
  5. 需要综合考虑多个组件生命周期,先后顺序,实现特定逻辑。

因此,如果是音视频播放器,剪辑工具,文字编辑工具,代码编辑工具,大型ERP系统等等,有这方面需求,用是Vuex没有问题的。
如果只是个CRUD系统,搜索,表格,表单提交,切换几个路由?
你只能跟他们说,随意吧,不嫌累的话。

当然,需不需要用和你会不会是两件事,不代表不需要用你就可以不用会了。