如何在整个app前完成一个异步操作
发布于 1 个月前 作者 huaer 136 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

有一个场景,需要在app开始之前call一个api,这样app里面每个组件都能访问该api拿到的数据。我尝试在app.vue的created里面添加该异步方法,但是子组件并拿不到数据。于是我在new Vue(…)外面 包了一层:

   getApi().finally(() => {
      new Vue(...)
    })

本地测试没问题,但是不知道是不是最佳方案。请问最合适的call这类api的地方是哪里呢?

10 回复

用啊,然后呢?vuex怎么在整个app之前用呢。。。

可能我没表达清楚,我是想要在app开始之前call这个api,然后存到localstorage里面,使得缓存的数据在app的整个生命周期都可以使用。不管是vuex还是啥技术吧,我觉得是异步这个操作的时机。

router.beforeEach 里面可以操作

这应该是最优方案。因为我还做过别的几种。
1.main.js 里 import 一个模块进来,执行create.
2.template.html文件里直接原生fetch数据。
3.就是你说的这种了。
三种都用过,并在不同项目里用过。有人说我神经病。

我试过 ,这个有异步问题,就是比如app.vue的mounted挂载之后还拿不到缓存的数据。

楼上的,突然让我想起还有一种。

state: {
    data:function(){
        return getApi();
      
    })
    }
  },

在main.js文件里直接执行。
localStorage.set(‘data’,store.state.data()).
如果你返回的是promise,那就更方便了。

async created()
{
await ApiCall();
doOtherThings().
}

router.beforeEach(async (to, from, next) => { await store.dispatch(‘getSomeThing’) next() })

new Vuex.Store({
  state: {
    xx: ''
  },

  mutations: {
    save (state, data) {
      state.xx= data
    }
  },

  actions: {
    async getSomeThing ({ commit }) {
      const res = await _getSomeThing()
      commit('save', res)
      return res
    }
  },

  getters: {
    xx: state => state.xx
  }
})


import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'xx'
    ])
  }
}

啊这……,你不用vuex的吗?

回到顶部