Vuexのレンダリングデータに問題があります。私はコンポーネントがマウントされ、私のforループで答えをレンダリングする前にAPI呼び出しをしています。しかし、データが返される前に '計算された'フックがトリガされ、レンダリングされません(未定義のレンダリング)。 私はAngularJSまたは類似のものでちょっとした解決機能を探しています。
また、Reactでは非同期データを受信する方法がredux-saga経由で実装されていることに気づいたことがあります。しかし、私は問題をカバーしたVueの実例を見つけることができません。
P.私はちょうどので、私はいくつかの詳細に間違っている可能性がありヴューを学び始めています、任意のアドバイスはVuex。コンポーネントを起動する前にAPIからデータを受け取った後にデータをレンダリングする方法
<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 iが成功したAPIコールの後にレンダリングしたい1データである)=私のために参考になります。
この
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))
}
}
actions.jsこれは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
}
}
作成されたフックを使用して、インスタンスの作成後にコードを実行できます。 – Muhammad