何时使用基本 Vue 实例、Vuex 或 mixin？

Question

在 Vue 中，您可以将常用的变量和方法存储在基本 Vue 实例中。这样其他组件可以访问这些数据。

new Vue({
    data: {
        name: 'John'
    }
}); 

如果您使用 Vuex 进行状态管理，您也可以在此处存储这些数据。

const store = new Vuex.Store({
    state: {
       name: 'John'
    }
}

据我了解，Vue mixins 也提供了相同的功能（允许任何组件全局访问这些通常共享的数据）。

Vue.mixin({
    data() {
        return {
            name: 'John'
        };
    }
});

我的问题是什么时候应该使用基本的 Vue 实例而不是 Vuex 或全局 mixin？

Answer 1

对不起，我有一个来自文档的关于Vue mixins 的扩展问题。 Vue 会在 mixins 和组件之间结合代码吗？

关于文件大小，view1 和 view2 使用 view1 中的 foo()、boo()、bar() 方法和 view2 中的 foo()、boo()、koko() 方法，在编译后会变大吗？ 换句话说，Vue 是否将 mixin 的代码单独注入到所有视图中？如果是这样，如果很多视图都使用相同的 mixin 来减小输出大小，那么使用 Vuex 会更好吗，因为 Vuex 是一个全局对象？？

// mixin.js
var mixin = {
  methods: {
    foo: function () {
      console.log('foo')
    },
    boo: function () {
      console.log('boo')
    }
  }
}

// view1.vue
var vm1 = new Vue({
  mixins: [mixin],
  methods: {
    bar: function () {
      console.log('bar')
    },
  }
})

// view2.vue
var vm2 = new Vue({
  mixins: [mixin],
  methods: {
    koko: function () {
      console.log('koko')
    },
  }
})

Answer 2

Vuex 是一个非常复杂的状态管理解决方案，像Unidirectional/one-way 数据流架构一样迎合 Redux。当您需要以复杂的方式在组件之间共享数据并且还需要处理副作用时，请使用它。您也可以说Vuex 只不过是Vue 实例的美化实现。

Vue 实例，也称为 Vue 组件，旨在为您的 UI 组件建模。是的，它也可以作为状态管理器和全局事件总线。但仅将其用于较小的应用程序和 POC。否则，Vuex 始终是正确的选择。

现在谈论Mixins。它并不是真正的状态管理机制。它旨在在不同的组件之间共享可重用的功能。通常使用 mixins 来只有 data() 并不是一个好的设计。它还必须有一些应该作用于该数据的方法。这就是 mixins 适合整个 Vue 生态系统的地方。