您是使用 getter 还是使用 http get 来检索已安装的数据？ Vue 3 和 Vuex

Question

我在列表中有任何数据：

<ul> 
  <li v-for="data in allData" :key="data">
    {{ data.name }}
  </li>
</ul>

非常简单的示例，但我想从组件中的 vuex 中检索数据..

mounted() { 
  axios.get("endpoint")
    .then(res => { 
      this.allData = res.data;
    })
    .catch(err => {
      console.log(err);
    }); 
}

这是可行的，但我认为我可以更好地从 vuex 检索数据..

我在 action.js 文件中有函数

[GET_COMPETITOR_ACTION_DATA](context) { 
  axiosinstance.get('competitors').then(res => {
    console.log('res mu' , res); 
    context.commit(GET_COMPETITOR_MUTATION_DATA, res.data); 
  }).catch(err => console.log(err));
}

我在getters.js

中也有一个功能

[GET_COMPETITOR](state){ 
  return state.competitor;
}

在 mutations.js 我有：

[GET_COMPETITOR_MUTATION_DATA](state,payload){ 
  payload.map(allD => state.competitor.push(allD)); 
}

现在在组件中：

何时尝试

computed: {
  ...mapGetters("competitor", {
    competitor: GET_COMPETITOR
  })

并使用：

<ul> 
  <li v-for="data in competitor" :key="data">
    {{ data.name }}
  </li>
</ul>

没有工作。

尝试时：

...mapActions("competitor", {
  allDataCompetitorData: GET_COMPETITOR_ACTION_DATA
}),

<ul> 
  <li v-for="data in allDataCompetitorData" :key="data">
    {{ data.name }}
  </li>
</ul>

也没有工作..

我的问题 ->

如何最好地从存储中检索数据以用于装载或创建的此 get 负载？

和

为什么我的尝试不起作用？

Answer 1

尝试等待响应：

async mounted() { 
  await this.allDataCompetitorData()
}

然后在模板中使用 getter:

<ul> 
  <li v-for="data in competitor" :key="data">
    {{ data.name }}
  </li>
</ul>

您是使用 getter 还是使用 http get 来检索已安装的数据？ Vue 3 和 Vuex

do you use getters or make http get to retrieve data on mounted? Vue 3 and Vuex

javascript

store

vue.js

vuex

vuejs2