如何等待从 Vuex 上传的数据？

Posted 2023-02-23

【中文标题】如何等待从 Vuex 上传的数据？

【英文标题】：How await uploaded data from Vuex?

【发布时间】：2017-12-05 06:42:25

【问题描述】：

我有 Vuex 存储，我存储“用户”（从服务器上传的 obj）

在创建部分的主 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')

    
  
)

【问题讨论】：

您是否在ready() 方法中调度loadUser 操作？

准备好不是方法。它在 vuex 中的状态

ready () 在 vue2 中被贬低。

【参考方案1】：

我修好了！

使用手表。

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

【参考方案2】：

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

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

在提交之前，组件中的所有内容都不会被实际数据填充。

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

另一种方法是显示覆盖，直到所有数据都像这样加载：

【讨论】：

我明白为什么会这样。组件已安装，异步数据未准备好。我在 Vuex 中使状态“准备就绪”，成功上传后变为真。我在计算部分检查“准备就绪”。如果未准备好，则返回 no_logo.png 但是，在我的组件中，在创建部分中，当我通过 Vuex 商店中的“user.id”从服务器获取数据时（但用户尚未准备好），我遇到了错误。如何在获取之前在已创建部分中检查“准备就绪”？