VUE 实现访问服务器，获取数据到vuex仓库的步骤

最新推荐文章于 2025-02-27 15:23:30 发布

躺着吃键盘

最新推荐文章于 2025-02-27 15:23:30 发布

阅读量1.4k

点赞数 1

分类专栏： VUE使用总结文章标签： vue.js 服务器前端

本文链接：https://blog.youkuaiyun.com/weixin_45349194/article/details/122944303

版权

VUE使用总结专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在Vue.js应用中使用Axios进行API请求，以及如何在Vuex中定义模块化的state、mutations、actions和getters来管理数据。首先，展示了如何编写axios请求，然后详细阐述了Vuex仓库中的函数实现，最后演示了在组件中如何调用这些仓库函数获取并使用数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

二、实现步骤

1.编写axios请求

代码如下（示例）：

//统一axios请求管理
import requests  from "./request";

//获取Search 搜索数据请求
export const reqgetSearchList = (params) =>{
    //携带参数进行请求服务器
    return requests.post('/list',params)
}

2.编写vuex 仓库函数

代码如下（示例）：

//search 模块vuex共享模块数据(小仓库)
import {reqgetSearchList } from '@/api'
const state={
  searchList :{}
};
const mutations= { 
  //调用方法
  GETSERCHLIST(state,data){
    //将参数赋值到state仓库中
    state.searchList = data;
  }

 };

const actions= { 
  //actions方法
  async reqgetSearchList({commit},params={}){
    //调用axios的请求
      let reslut= await reqgetSearchList(params);
      console.log(reslut)
      //获取到返回数据，调用GETSERCHLIST方法，并传递数据
      commit('GETSERCHLIST',reslut.data);
  }
 };

const getters= {  };

const search = {
   state,
   mutations,
   actions,
   getters
 }

export default search;

3.调用仓库函数并且获取到仓库state数据

import Selector from "./Selector/Selector";
import  { mapState } from 'vuex'
export default {
  name: "Search",
  data() {
    return {};
  },
  components: { Selector },

  mounted() {
    //发送获取数据请求
    this.$store.dispatch('reqgetSearchList',{});
  },
  computed:{
    ...mapState({//获取仓库数据，因为是模块化仓库所以加了search 定位到小仓库search
      searchList:(state)=>{
         return state.search.searchList;
      }
    })
    
  },

  methods: {},
};
</script>