Nuxt 插件无法在功能块中访问 Vue 的 'this' 实例
Nuxt plugin cannot access Vue's 'this' instance in function blocks
所以我设法注入 hls.js 以使用 nuxtjs $root 元素和 this
我是这样做的 (hls.client.js):
import Hls from 'hls.js';
export default (context, inject) => {
inject('myhls', Hls)
}
和nuxt.config.js
plugins: [
'~plugins/hls.client.js',
],
从字面上看,这很好用 :-) 但我无法在 hls 事件中引用 'this'。
playHls() {
this.playing = true
if(this.$myhls.isSupported()) {
this.hls = new this.$myhls();
this.audio = new Audio('');
this.hls.attachMedia(this.audio);
this.hls.loadSource(this.scr_arr[2]);
this.audio.play()
// 'THIS' DOES NOT WORK INSIDE this.hls.on
this.hls.on(this.$myhls.Events.MEDIA_ATTACHED, function () {
console.log(this.scr_arr[2]); // DOES NOT LOG
console.log("ok") // works great
});
// 'THIS' DOES NOT WORK INSIDE this.hls.on
this.hls.on(this.$myhls.Events.MANIFEST_PARSED, function (event, data) {
console.log('manifest loaded, found ' + data.levels.length + ' quality level') // WORKS
console.log("ok") // WORKS
this.audio.volume = 1 // DOES not work
});
}
},
所以我在这些事件中不能使用 nuxtjs 'this',因为似乎有不同的范围?
我能以某种方式在这些事件中获得 'this' nuxt 作用域吗?
像
一样替换你的函数
this.hls.on(this.$myhls.Events.MANIFEST_PARSED, function (event, data) {
进入
this.hls.on(this.$myhls.Events.MANIFEST_PARSED, (event, data) => {
保持 this
上下文绑定到 Vue 应用程序,否则它将被限定为块范围的上下文。
所以我设法注入 hls.js 以使用 nuxtjs $root 元素和 this
我是这样做的 (hls.client.js):
import Hls from 'hls.js';
export default (context, inject) => {
inject('myhls', Hls)
}
和nuxt.config.js
plugins: [
'~plugins/hls.client.js',
],
从字面上看,这很好用 :-) 但我无法在 hls 事件中引用 'this'。
playHls() {
this.playing = true
if(this.$myhls.isSupported()) {
this.hls = new this.$myhls();
this.audio = new Audio('');
this.hls.attachMedia(this.audio);
this.hls.loadSource(this.scr_arr[2]);
this.audio.play()
// 'THIS' DOES NOT WORK INSIDE this.hls.on
this.hls.on(this.$myhls.Events.MEDIA_ATTACHED, function () {
console.log(this.scr_arr[2]); // DOES NOT LOG
console.log("ok") // works great
});
// 'THIS' DOES NOT WORK INSIDE this.hls.on
this.hls.on(this.$myhls.Events.MANIFEST_PARSED, function (event, data) {
console.log('manifest loaded, found ' + data.levels.length + ' quality level') // WORKS
console.log("ok") // WORKS
this.audio.volume = 1 // DOES not work
});
}
},
所以我在这些事件中不能使用 nuxtjs 'this',因为似乎有不同的范围?
我能以某种方式在这些事件中获得 'this' nuxt 作用域吗?
像
一样替换你的函数this.hls.on(this.$myhls.Events.MANIFEST_PARSED, function (event, data) {
进入
this.hls.on(this.$myhls.Events.MANIFEST_PARSED, (event, data) => {
保持 this
上下文绑定到 Vue 应用程序,否则它将被限定为块范围的上下文。