如何从mixins访问Vue实例?

时间:2018-10-31 07:21:58

标签: vue.js vuex nuxt

我想实现将this.$store.value分配给本地数据的这种逻辑。 例如,这就是我在pages / index.vue中所做的事情。

method: {
  this.value = this.$store.value
}

我想将其记录到mixins中,因为实际上它周围还有其他逻辑,并且使用了一些页面。

但是,我不知道该如何从mixins访问this(VueInstnce)?

1 个答案:

答案 0 :(得分:0)

Vue不支持它,因为mixin首先运行在组件代码之前, 然后mixin被Vue绑定(合并)到组件实例,因此很容易从组件/实例范围访问mixin,反之亦然。

为了满足您的需求,我认为应运行(例如created之类的mixin方法),并将给定的组件实例引用作为参数,但这不是那样。

但是,如果您重新组织代码以运行instance中需要的代码。created 可以访问其中的mixin方法和数据并自行传递参数:

var mixin = {
  data: {mixin: 'mixin'},
  created: function () {
    console.log('mixin hook called')
  },
  methods: { test: function(arg){console.log(arg); } }
};

vm=new Vue({
  data: {component: 'component'},
  mixins: [mixin],
  created: function () {
    console.log('called hook of ' + this.component + ' and accessing ' + this.mixin)
  },
});

vm.test(vm.mixin);
vm.test(vm.component);  // no problem to run mixin's method with component's data

> mixin hook called
> called hook of component and accessing mixin
> mixin
> component