Vue/Nuxt 生命周期在 beforecreate 中调用 promise,在 created 中调用 getter

Vue/Nuxt lifecycle calling a promise in beforecreate and the getter in created

我正在尝试在我的 beforeCreate() 中为组件设置一组变量,然后在 created() 中获取该变量。本质上,我需要在我的商店中设置变量,然后获取该变量。我创建的调用了一个运行 axios 承诺的操作,该承诺将数据提交给状态,我在商店中有一个 getter,我想在我的 created() 中调用它来获取该数据。

我知道我从我的承诺中得到了正确的数据,正如我在我的控制台日志中看到的那样,我只是似乎无法从我的 getter.

中得到这些数据

好像并不想工作,我想是不是和axios还没有返回promise有关?如何确保我的 created() 等到 axios promise 在 beforeCreate() 中返回?

示例代码

..... 组件....

data(){
  return{currentUser: null}
},
beforeCreate(){
  this.$store.dispatch('users/setCurrent')
}, 
created(){
 this.currentUser = this.$store.getters['users/current'].displayname
}

......商店......

export const state = () => ({
  current: {}
});

export const mutations ={
  setCurrent: (state, c) => (state.current = c)
}

export const getter = {
  current: state => state.current
}

export const actions = {
setCurrent({commit, dispatch, rootState}){
   this.$axios.$get('/api/user/current', {headers: rootState.sessionUser.current})
   .then(res => {
     console.log(res)
     commit("setCurrent" res)
  })
}

尝试等待你的行动得到回应:

export const actions = {
  async setCurrent({commit, dispatch, rootState}){
    await this.$axios.$get('/api/user/current', {headers: rootState.sessionUser.current})
      .then(res => {
      console.log(res)
      commit("setCurrent" res)
  })
}

然后在创建或挂载的钩子中:

async created() {
  await this.$store.dispatch('users/setCurrent')
  this.currentUser = this.$store.getters['users/current'].displayname
}