vue3项目之Vuex 获取动态数据流程

2024-07-10 14:33| 来源: 网络整理| 查看: 265

Vuex 获取动态数据流程

我们进入页面时，发送一个请求，将请求得到的数据存储在 vuex 中，并在组件中使用 vuex 中的数据

这个请求可以用真实接口获取，也可以用 mock 接口获取（mockjs 使用方法在 vue2_project）

注：这里还是客户端获取 vuex 数据的方法！！服务端获取在下一节

请求接口 api/home/index.ts import { http } from '@/utils/http' import mockRequests from '@/mock/mockRequests' // 真实接口 export const reqgetRoomList = function () { return http.httpRequestGet(`http://110.42.184.111/api/room/room/getRoomList?pageNo=1&pageSize=30`, {}); } // mock 接口（需要提起封装好 mock 请求） // export const reqgetRoomList = function () { // return mockRequests.get('/roomList'); // } vuex 获取数据 store/index.ts state: { roomList: [] }, actions: { async getRoomList({ state }) { let result = await reqgetRoomList() console.log(result); if (result.code == '000000') { state.categoryList = result.data } else { ElMessage.error('获取房屋列表失败') } } }, 组件中调用 dispath // 组件中简化使用 let roomList = computed(() => store.state.roomList) // 通常在 onMounted 中发送请求 onMounted(async function () { await store.dispatch('getRoomList') }) **entry-client.ts 中调用：**主要用于初始化 vuex 中的数据，集中在这里定义，特别是用到了浏览器的 api router.beforeEach(async function (to, from, next) { // 打开所有仓库 let result = await airbnbDB.openStore(stores, 'id') if (result) console.log('所有对象仓库打开成功'); // 查询并保存全局语言 let resultLang = await fetchLanguageApi() store.commit('fetchLanguage', resultLang) // 获取登录状态 let status = localStorage.getItem('usertoken') ? 1 : 0 store.commit('getUserStatus', status) next() })

【本文地址】

公司简介

联系我们