javascript - 如何在相关组件上制作 Vue 插件函数调用方法？

Question

我想制作一个注册全局组件并允许插件方法的 Vue 插件(可通过 this.$magic 全局访问)。例如:

src/plugins/magic.js

import Magic from './Magic.vue';

export default {
  install(VueInstance) {
    console.log('Installing');

    VueInstance.component('magic', Magic);
    VueInstance.prototype.$magic = {
      increment() {
        // ???
      },
    };
  },
};

在 Magic.vue 组件中，有一个方法应该在开发人员调用 this.$magic.increment() 时调用。我不确定如何执行此操作，并且 Vue 文档并未真正涉及这些细节。

Answer 1

对于陈述者来说，写“VueInstance”是错误的，因为它是交给你的 Vue 类函数，而不是 Vue 的实例。

现在回答你的问题，这对我来说不是很清楚，我会说你需要使用状态管理系统。

如果我理解得很好，您想在 Vue 原型(prototype)上创建一个调用组件“Magic”每个实例的另一个方法部分的方法。(为什么我说每个实例？因为您不能从组件的定义中调用方法，所以必须实例化它才能访问其中一个方法或数据)。

老实说，这似乎太复杂了，但由于我不知道你的最终目标是什么，这里有一些线索:

1. 您可以创建一个空的组件实例来访问它的方法。

Import Magic from './Magic.vue';

const myMagic = new (Vue.extend(Magic));

export default {
  install(VueInstance) {
    console.log('Installing');

    VueInstance.component('magic', Magic);
    VueInstance.prototype.$magic = {
      increment() {
        myMagic.method()
      }
    };
  }
};

理论上，您的 Magic 组件的所有实例都将具有相同的方法，所以这可行，但是，这不会改变您所有实例的状态，在这里您只能访问该方法(所以我看不到用例，服务/实用程序会更好，请参阅#2)

1. 使用 Magic 组件导入的共享状态和共享方法，而不是尝试使用 Magic 组件中的方法。

共享.js

export const state = {
  somedata: 0
};

export const methods = {
  inc() {
    state.somedata++
  }
};

魔术.vue

import { state, methods}  from './Shared.js'

export default {
  data() {
    return {
      shared: state
    }
  },
  methods: {
    Something () {
      methods.inc();
    }
  }
};

插件.js

import { state, methods}  from './Shared.js'
import Magic from './Magic.vue';

export default {
  install(VueInstance) {
    console.log('Installing');

    VueInstance.component('magic', Magic);
    VueInstance.prototype.$magic = {
      increment() {
        methods.inc()
      }
    };
  }
};

在全局范围内，您可以通过这种方式共享它(它是响应式的，因为 a 将对象引用提供给 Magic 组件数据，这将成为每个实例的 sae 引用，因此共享)。

1. 做 #2，但使用 vuex 与状态和突变或 Action 。

最后一点，由于我们不知道您在组件的方法中尝试做什么，因此很难提供帮助。如果以下答案之一不能解决您的用例，请尝试详细说明。