前端向后端请求数据，使用Vuex管理(加工)数据，动态展示数据（state仓库三连环），组件复用

最新推荐文章于 2024-05-03 23:09:15 发布

WinnerCC

最新推荐文章于 2024-05-03 23:09:15 发布

阅读量662

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/WinnerCC/article/details/130246684

版权

本文详细介绍了如何在Vue项目中利用Vuex从后端获取数据，通过Vuex的Action、Mutation进行数据管理，并在组件中复用这些数据。首先，讲解了创建API接口和在组件中触发Action的步骤，然后阐述了在Vuex的Actions和Mutations中如何处理数据，最后展示了如何在组件中通过mapState拿到数据并进行动态展示，实现组件复用。

摘要由CSDN通过智能技术生成

Vuex使用，获取后端数据，展示（三连），组件复用

一、写api

使用mock模拟后端数据(链接)：https://blog.csdn.net/WinnerCC/article/details/130153124?spm=1001.2014.3001.5502

project > src > api > index.js

import mockRequets from './mockAjax';
//获取floor数据
export const reqFloorList = () => mockRequets.get('/floor');

二、vuex仓库获取并管理数据（state）（仓库三连环）

把vuex的原理图摆上，方便对着看

在这里插入图片描述

① Step1：组件派发Aciton

Vue Components Dispatch Actions

project > src > pages > Home > index.vue

在组件要去获取数据的时机中，派发action

mounted() {
   
    this.$store.dispatch("getFloorList");
}

②Step2：在Vuex中的Actions中获取数据

project > src > store> home.js

引入我们在一中写好的api：

import { reqFloorList } from "@/api";

初始化数据

const state = {
   
    floorList:[],
};

Actions中获取数据并commit给Mutations

actions中可以包含异步代码（定时器，Ajax等）

Actions中的函数能够接收到一个与store实例具有相同方法和属性的context对象（打印如下），这个对象中有个commit方法，是Actions用来向M

最低0.47元/天解锁文章