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

Question

我在使用Vuex的渲染数据方面遇到了一些麻烦。我在组件安装之前进行api调用，并在我的for循环中呈现答案。但是在返回数据之前触发了'计算'钩子并且没有渲染（渲染未定义）。我正在寻找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>

auOptions是我想在成功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 =“someVariable”来确保只有当someVariable不是'undefined'时才会呈现列表，这样你就可以避免错误信息了。