如何等待 Vuex 上传的数据？

Question

我有 Vuex 存储，我存储 'user'（从服务器上传的对象）

在主 App.vue 创建的部分中，我总是填写 'user'

这是异步方法。我的组件不等待。当我在模板 {{user.logo}} 中使用时，我在控制台 404

中遇到错误

http://example.net/images/undefined

但下一秒，当用户上传时，错误消失了。

如何让应用在 Vuex 中等待上传的异步日期？

已更新。我明白为什么会这样。组件已安装，异步数据未就绪。我在 Vuex 中创建状态 'ready'，上传成功后变为 true。我在计算部分检查了 'ready'。如果还没准备好 return no_logo.png

但是，在我的组件中，在创建的部分中，当我通过 'user.id' 从 Vuex 存储（但用户尚未准备好）从服务器获取其他数据时，出现错误。如何在获取之前检查创建的部分中的 'ready'？

//html
<div id='app'>

  <ul>
    <li v-for='role in roles'>
      <p>{{role}}</p>
    </li>
  </ul>


</div>

//script Vue
var app = new Vue({
  el: '#app',
  data: {
    roles: []
  },

  created: {
    this.fetchingItems() //GOT ERROR need check Ready!!!
  },

  methods: {
    fetchingItems() {
      axios.get('api/getRoles/${this.$store.user.id}')
        .then((res) => this.roles = res.data.roles)
    }
  }
})


// This is store!!!.
const store = new Vuex.Store({
  state: {
    ready: false,
    user: {}
  },
  mutations: {
    USER_SET(state, user) {
        state.user = user
      },
      READY_SET(state) {
        state.ready = true
      }

  },
  action: {
    loadUser() {

  axios.get('api/getUser/${parseInt(localStorage.getItem('user_id'))}')
      commit('USER_SET', res.data.user)
      commit('READY_SET')

    }
  }
})

Answer 1

会出现这种情况，因为挂载组件时用户信息不存在，但最终会存在。

在此图中，您正在调度和操作，向后端 API 请求数据，然后提交给存储。

直到提交组件中的所有内容都不会被实际数据填充。

你需要做的是使用v-if来显示或不显示该组件。

另一种方法是显示叠加层，直到所有数据加载完毕，如下所示：

Answer 2

我修好了！

使用手表。

watch: {
        ready: function () {
            this.fetchingItems()
        }
    },

如何等待 Vuex 上传的数据？

How await uploaded data from Vuex?

vue.js

vuejs2

vuex