vue2 怎么延迟执行main.js中的vue.use()

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 插件也是可以得,但是实例得用当前实例