如何让第三方 Vue 库可以访问正在使用的其他第三方 Vue 插件？答案

【问题标题】：How can I make a third party Vue library have access to other third-party Vue plugins being used?如何让第三方 Vue 库可以访问正在使用的其他第三方 Vue 插件？
【发布时间】：2018-10-12 13:43:47
【问题描述】：

假设我在一个项目中使用 vuex、vue-i18n 和 Syncfusion ej2-vue-grids。

我的应用程序可以访问 $store 和 $t，但是如果我创建一个网格并为列定义自定义模板，则在该字段中呈现的组件无法访问 vuex 或 vue-i18n。

在第一次设置 Vue 应用程序时，我可以通过设置 Vue.prototype.$store = store; 来解决这个问题。不过，vue-i18n 有几个额外的属性，在原型上设置所有东西感觉就像是 hack。

我假设 Syncfusion 在为网格列创建组件时必须调用 Vue.extend，因此该组件会丢失应用程序的所有上下文。这是他们这边的一个错误，还是我应该做些不同的事情？

编辑这是一个 plnkr，其中包含我所看到的行为示例。

https://plnkr.co/edit/XwVC6yNQaI2vQIUoWfSm?p=preview

第一次查看时，Freight 列应该是空的（因为它无法访问商店）并且在网格下方应该是一行 !!!!!!!!! （因为它可以访问商店）。

如果您取消注释 index.js 中的第 15 行，则 !!!!!!在网格下方，Freight 列的内容应该是可见的。

【问题讨论】：

插件在附加到它们时已经扩展了Vue.prototype。给我们看一些代码。或者，也许是一个最小的可验证示例。
我在我的问题正文中添加了一个示例。 plnkr.co/edit/XwVC6yNQaI2vQIUoWfSm?p=preview

标签： javascript vue.js vuejs2 syncfusion

【解决方案1】：

We need to pass the store and vue-i18n reference to the template declaration.AS in below code snippet.
<pre>
<code>
   tmpl() {
        return {
          template: {
            store,
             i18n,
            data() {
              return {
                data: {}
              }
            },
            computed: {
              test() {
                return this.$store.state.test;
              }`enter code here`
            },
            template: `<div>
   <div> Translated text child: {{ $t("message.hello") }}</div>
<span>{{ test }} {{ data.Freight }} {{ test }}</span> </div>`
          }
        }
      }
</code>
</pre>

使用商店更新列模板的 Plunker 示例：https://plnkr.co/edit/Sei9F1MEvNyLGseZEzM1?p=preview

【讨论】：