vue2 怎么延迟执行main.js中的vue.use()
main.js
Vue.use(VueAnalytics, {
id: axios.get('/m/ga').then(response => {
return response.data.data.id
})
})
这个是google analytics用来记录用户行为的,但是这个接口需要token,而获取token的方式是在登录页点击登录后接口才返回,怎么在接口返回token之后再回到main.js执行这个Vue.use()
login.vue
login() {
let url = "";
let data = {};
url = "login/authenticate/";
data.username = this.userEmail;
data.password = this.password;
axios
.post(url, data)
.then((response) => {
localStorage.token = response.data.token;
用vuex可以做吗?具体关键代码可以参考一下吗
方法很多
// main.js
Vue.prototype.$demoFunc = () => {
const demo = localStorage.getItem('demo')
console.log('demo: ', demo)
}
// demo.vue
created () {
this.login()
},
methods: {
login () {
setTimeout(() => {
localStorage.setItem('demo', 123)
this.$demoFunc()
}, 1000)
}
}
vue延迟1秒执行_8个非常实用的Vue自定义指令_邵典的博客-CSDN博客
我给你一个思路,你把token存在Vuex里面,默认token是空字符串,当你请求回来以后赋值给token;
然后你在main.js里面写一个定时器,每过100毫秒就运行一次,定时器的逻辑就是,判定Vuex里面存的token是不是还是空字符串,如果不是,就代表token有值了,然后调用Vue.use方法,然后清除定时器
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
let timer =setInterval(()=>{
//这行代码一定要写在引入store的后面
if (store.state.token!=""){
//执行你的Vue.use()函数
//清除定时器
clearInterval(timer)
}
},200);
如果有帮助,希望采纳一下哦,多谢
我想你可能要的是这样的,main.js 中预留一个回调
Vue.$on('init_analytics',()=>{
Vue.use(VueAnalytics, {
id: axios.get('/m/ga').then(response => {
return response.data.data.id
})
})
})
登陆模块
// demo.vue
login() {
const that = this;
let url = "";
let data = {};
url = "login/authenticate/";
data.username = this.userEmail;
data.password = this.password;
axios
.post(url, data)
.then((response) => {
localStorage.token = response.data.token;
that.$emit('init_analytics')//这个不触发可以换成 that.$root.$emit('init_analytics')
})
PS: 我这边用的是 Vue 自带的事件机制,没有实验过哦,理论上就是这样一个思路,将需要运行的逻辑放入回调,等到需要出发的时机,再emit出发这个事件,不理解的话可以了解下观察者模式
直接给他加个定时
vue本来就是运行时, 请求完接口再去use 插件也是可以得,但是实例得用当前实例