vue3+vuex 的 action 来发送网络请求的

<template>
  <div class="app">
    <h3>Home Page</h3>
    <ul>
      <template v-for="item in $store.state.banners" :key="item.acm">
        <li>{{ item.title }}</li>
      </template>
    </ul>
  </div>
</template>


<script setup>

// 告诉vuex 发起网络请求
import { useStore } from 'vuex';
const store = useStore()
store.dispatch('getHomeMultidataDataAction')

</script>

import { createStore } from 'vuex'

export default createStore({
  state: {
    // 请求的数据
    banners: [],
    recommends: []
  },
  mutations:{
    // 提交state
    changeBanners(state, banners) {
      state.banners = banners
    },
    changeRecommends(state, recommends) {
      state.recommends = recommends
    }
  },
  actions: {
    // 发送请求
    async getHomeMultidataDataAction(context){
      const res = await fetch("http://123.207.32.32:8000/home/multidata")
      const data = await res.json()
      
      // 修改state数据
      context.commit("changeBanners", data.data.banner.list)
      context.commit("changeRecommends", data.data.recommend.list)

    }

  },

})