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

二、实现步骤

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>

---

总结

1.先编写axios 调用请求服务器

2.编写vuex仓库的三连环步骤

3.最后在需要用到数据的组件上发送vuex请求,并且获取vuex 仓库的数据