我只希望能够打电话。
{{ globalThing(0) }}
在模板中,无需在每个.vue文件中定义globalThing。
我尝试了各种插件配置(或者是混合?不确定Nuxt是否使用这个术语),但都无济于事。无论我做什么,globalThing
和this.globalThing
始终未定义。
在某些情况下,我甚至可以在Chrome中进行调试,看到this.globalThing
确实被定义了...但代码仍然崩溃,这让我很难解释。
这是我的许多尝试之一,这次使用插件:
nuxt.config.js:
plugins: [
{
src: '~/plugins/global.js',
mode: 'client'
},
],
全局.js:
import Vue from 'vue';
Vue.prototype.globalFunction = arg => {
console.log('arg', arg);
return arg;
};
并且在.vue文件中的模板中:
<div>gloabal test {{globalFunction('toto')}}</div>
并且...结果为:
TypeError _vm.globalFunction 不是一个函数
这里有一个不同的想法,使用Vuex store。
store/index.js:
export const actions = {
globalThing(p) {
return p + ' test';
}
};
.vue文件模板: 测试结果:{{test('fafa')}}
.vue文件脚本:
import { mapActions } from 'vuex';
export default {
methods: {
...mapActions({
test: 'globalThing'
}),
}
};
结果是.........
测试结果:[object Promise]
好的,这次至少方法存在了。我很希望不必在每个组件中强制执行“import mapActions”等操作......但如果那真的是唯一的方法,那就无妨。
然而,由于此调用是异步的,我只得到一个Promise。当它完成时,Promise确实包含返回的值,但对我来说没有用处,因为我需要它从该方法中返回。
编辑
在客户端,“this”是未定义的,除非......它并不是!也就是说,
console.log('this', this);
控制台输出显示为“undefined”,但 Chrome 的调试器声称,在此控制台日志之后,“this”正是它应该是的组件实例,this.$store也是如此!由于我自己都不相信自己的眼睛,所以在这里添加了一张截图作为证明。
import Vue from 'vue'; Vue.prototype.globalThing = arg => { ... }
你需要这个吗? - talkhabi