Question

我的nuxt应用程序具有以下结构。

布局/admin.vue

  async mounted () {
    await this.loadState()
  },
  methods: {
    async loadState () {
      const token = localStorage.getItem('token')
      const userId = localStorage.getItem('userId')
      const payload = {
        status: true,
        token,
        userId
      }
      if (token && userId) {
        await this.$store.commit('admin/loadUserData', payload)
      }
    console.log('Load State')
    }
}

上面的代码段将令牌和用户令牌存储在状态中。

发布/编辑/_id.vue

export default {
  name: 'Edit',
  layout: 'admin',
  async mounted () {
        console.log('Load post data')
    try {
      const data = await this.$store.dispatch('post/editPost', this.$route.params.id)
      console.log(data)
    } catch (e) {
      console.log(e.response)
    }
  }
  }

我的州立商店 store / post.js

export const actions = {
   async editPost ({ rootState }, id) {
    const graphqlQuery = {
      query: `
        query{
          editPost(id: "${id}"){_id title content imageUrl}
        }
      `
    }
    console.log(rootState.admin.token)
    const res = await this.$axios.post('http://localhost:8080/graphql', graphqlQuery, {
      headers: {
        Authorization: 'Bearer ' + rootState.admin.token,
        'Content-Type': 'application/json'
      }
    })
    // console.log(res.data.data.editPost)
    return res.data.data.editPost
  }
}

当我逐步进入路线http://localhost:3000/admin/post/edit/{somepostId}时（从帖子列表到编辑帖子），我将获得帖子数据。

但是如果刷新页面，我会收到错误消息。

原因是当我刷新页面时。 console.log(rootState.admin.token)设置为null。

我正在以admin.vue布局加载数据。如何等待admin布局中的方法完成。尽管我使用了异步等待，但它并不是在等待状态加载数据，而是一直在获取初始的空白数据。

我在 layout / admin 和 post / edit / _id 这两种方法中都添加了console.log（）。

发布/编辑/ _id 中的console.log（）。当我点击刷新时会先运行。

等待状态加载到vuex中

0 个答案: