<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)
}
},
})
标签：recommends,const,vuex,state,vue3,action,banners,data From： https://www.cnblogs.com/qd-lbxx/p/16639030.html