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

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()

})