Question

我在使用Vuex渲染数据方面遇到了一些麻烦。我在组件安装之前进行api调用，并在我的for循环中呈现答案。但是＆＃39;计算＆＃39;在返回数据之前触发了钩子并且没有渲染（渲染未定义）。我在AngularJS或类似的东西中寻找一些有点解决功能的东西谷歌还帮助我意识到，在React中，通过redux-saga实现了接收异步数据的方式。但我无法在Vue上找到任何有关我的问题的实例附：我刚刚开始学习Vue所以我可能在某些细节上错了，任何建议对我都有帮助=）

    <div class="form-group">
                        <label for="ua">Choose appropriate user-agent</label>
                        <select v-model="selectedUA" class="form-control" id="ua">
                            <option disabled value="">Please select one</option>
                            <option v-for="option in uaOptions" :value.sync="option.ua">
                                {{ option.name }}
                            </option>
                        </select>
                    </div>
    <script>
        module.exports = {
        beforeMount() {
          this.$store.dispatch('proxyList')
        },
        computed: {
          proxyOptions() {
            return this.$store.state.proxies
          }
        }
      }
   </script>

uaOptions是在成功api调用后我想呈现的数据。

这是actions.js

    const actions = {
  proxyList(context) {
    return api.get(appConfig.serverAddress + '/get-countries')
      .then((response) => context.commit('PROXIES_SUCCESS', response))
      .catch((error) => context.commit('PROXIES_FAILURE', error))
  }
}

这是mutation.js

const mutations = {
  [types.PROXIES_SUCCESS](state, payload) {
    state.proxies = payload
    state.proxyInitError = false
  },
  [types.PROXIES_FAILURE](state, payload) {
    state.proxies = payload
    state.proxyInitError = true
  }
}

Answer 1

不确定我理解你在问什么，但也许你应该尝试使用v-if =＆＃34; someVariable＆＃34;确保只有当someVariable不是“未定义”时才会呈现该列表。所以你可以避免错误信息。

Vuex。如何在组件启动之前从API接收数据后呈现数据

1 个答案: