如何让第三方 Vue 库可以访问正在使用的其他第三方 Vue 插件?
How can I make a third party Vue library have access to other third-party Vue plugins being used?
假设我在项目中使用 vuex、vue-i18n 和 Syncfusion ej2-vue-grids。
我的应用程序可以访问 $store 和 $t,但是如果我创建一个网格并为列定义自定义模板,则在该字段中呈现的组件将无法访问 vuex 或 vue-i18n .
我已经能够通过在首次设置 Vue 应用程序时设置 Vue.prototype.$store = store;
来解决 vuex 的这个问题。不过,vue-i18n 有几个额外的属性,在原型上设置所有内容感觉就像一个 hack。
我假设 Syncfusion 在为网格列创建组件时必须调用 Vue.extend
,因此该组件正在丢失应用程序的所有上下文。这是他们这边的错误,还是我应该做些不同的事情?
编辑
这是一个 plnkr,其中包含我所看到的行为示例。
https://plnkr.co/edit/XwVC6yNQaI2vQIUoWfSm?p=preview
第一次看的时候,运费栏应该是空的(因为不能访问店铺),网格下面应该是一行!!!!!!!! (因为它 可以 访问商店)。
如果您在 index.js
中取消注释第 15 行,则两行 !!!!!!在网格下方,运费列的内容应该是可见的。
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
假设我在项目中使用 vuex、vue-i18n 和 Syncfusion ej2-vue-grids。
我的应用程序可以访问 $store 和 $t,但是如果我创建一个网格并为列定义自定义模板,则在该字段中呈现的组件将无法访问 vuex 或 vue-i18n .
我已经能够通过在首次设置 Vue 应用程序时设置 Vue.prototype.$store = store;
来解决 vuex 的这个问题。不过,vue-i18n 有几个额外的属性,在原型上设置所有内容感觉就像一个 hack。
我假设 Syncfusion 在为网格列创建组件时必须调用 Vue.extend
,因此该组件正在丢失应用程序的所有上下文。这是他们这边的错误,还是我应该做些不同的事情?
编辑 这是一个 plnkr,其中包含我所看到的行为示例。
https://plnkr.co/edit/XwVC6yNQaI2vQIUoWfSm?p=preview
第一次看的时候,运费栏应该是空的(因为不能访问店铺),网格下面应该是一行!!!!!!!! (因为它 可以 访问商店)。
如果您在 index.js
中取消注释第 15 行,则两行 !!!!!!在网格下方,运费列的内容应该是可见的。
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