vue.js - 如何等待 Vuex 上传的数据？

Question

我有 Vuex 存储，我存储“用户”(从服务器上传的对象)

在主 App.vue 的创建部分中，我总是填写“用户”

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

http://example.net/images/undefined

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

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

---

已更新。我明白为什么会这样。组件已安装，异步数据未就绪。我在 Vuex 中使状态“准备就绪”，上传成功后它变为真。我在计算部分检查“准备好”。如果没有准备好返回 no_logo.png

但是，在我的组件中，在创建的部分中，当我通过 Vuex 存储中的“user.id”从服务器获取其他数据时(但用户尚未准备好)我得到了错误。如何在获取之前检查创建的部分中的“就绪”？

//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 来显示或不显示该组件。

另一种方法是显示一个叠加层，直到所有数据都像这样加载: