I upgrade the vue to 3.x "vue": "^3.2.28", and then tweak the code initial app like this:
import Vue from 'vue';
import template from './tpl.html';
import chromeCall from 'chrome-call';
import getOptions from '../public/default-options';
import {getTabLocation,isHostEnabled} from '../public/util';
import ST from './st';
import { createApp } from "vue";
export const appOptions = {
el : 'app' ,
template ,
data : {
_host : null ,
canInject : false ,
enabled : false
} ,
methods : {
async switchEnable() {
const {_host} = this.$data ,
enabled = this.enabled = !this.enabled ,
{excludeDomains} = await getOptions( 'excludeDomains' );
if ( enabled ) {
excludeDomains.splice( excludeDomains.indexOf( _host ) , 1 );
} else {
excludeDomains.push( _host );
}
return chromeCall( 'storage.local.set' , { excludeDomains } );
}
} ,
components : {
'st-box' : ST
} ,
async ready() {
const locationObj = await getTabLocation();
if ( locationObj ) {
this.$data._host = locationObj.host;
this.canInject = true;
this.enabled = await isHostEnabled( locationObj );
}
}
};
/* istanbul ignore if */
if ( process.env.NODE_ENV !== 'testing' ) {
window.onload = ()=> {
setTimeout( ()=> {
const app = createApp(appOptions);
app.mount("app");
}, 0 );
};
}
I changed the app initial with Vue 3 way. The legacy initial was new Vue(), the new way was createApp. when I run this code, shows error like this:
Uncaught TypeError: dataOptions.call is not a function
at applyOptions (commons1.js:4175:34)
at finishComponentSetup (commons1.js:8531:9)
at setupStatefulComponent (commons1.js:8443:9)
at setupComponent (commons1.js:8373:11)
at mountComponent (commons1.js:6296:13)
at processComponent (commons1.js:6271:17)
at patch (commons1.js:5872:21)
at render (commons1.js:7015:13)
at mount (commons1.js:5261:25)
at Object.app.mount (commons1.js:10834:23)
what am I missing? what should I do to tweak my code to make it work?
finally I figure out the dataOptions was the data defined in appOptions that could not be understand by vue 3, in legacy vue, define data like this:
data() {
return {
foo: 1,
bar: { name: "hi" }
}
}
in vue 3, we should define like this:
setup() {
const foo = ref(1);
const bar = reactive({ name: "hi" });
return { foo, bar }
}
more informatioin are here. I changed my code like this:
setup () {
const host =null;
const canInject =false;
const enabled = false;
return {host,canInject,enabled};
} ,