vue.config.js请求数据

Posted 2022-12-02 web-gmy

vue.config.js
let mockData = require("./mockData");
module.exports = 
  lintOnSave: false, // 是否开启ESLint
  devServer: 
    before(app) 
      // app express提供的
      mockData(app);
    
  ,
  productionSourceMap: false // 不产生sourcemap文件
;

建立mockData/index.js
function mockData(app) 
  app.get("/slider", (req, res) => 
    setTimeout(() => 
      res.json([
        
          url: "http://www.didichuxing.com/",
          image:
            "//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png"
        ,
        
          url: "http://www.didichuxing.com/",
          image:
            "//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png"
        ,
        
          url: "http://www.didichuxing.com/",
          image:
            "//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png"
        
      ]);
    , 2000);
  );

module.exports = mockData;

api/home.js
// 首页接口
import Ajax from "../util/request"; // 封装请求
// 轮播图接口
export const getSliders = () =>
  Ajax.request(
    url: "/slider"
  );
export default ;

store/module/home.js
import * as Types from "../mutations-types";
import  getSliders  from "../../api/home";
export default 
  namespaced: true,
  state: 
    sliders: []
  ,
  actions: 
    async [Types.SET_SLIDER]( commit ) 
      try 
        const sliders = await getSliders();
        commit(Types.SET_SLIDER, sliders);
       catch (error) 
        console.log(error);
      
    
  ,
  mutations: 
    // mutations 只用来修改state状态
    [Types.SET_SLIDER](state, payload) 
      state.sliders = [...payload];
    
  
;

组件使用Home.vue
<template>
  <div class="home">
    <!-- 轮播图 -->
    <cube-slide :data="sliders" />
  </div>
</template>
<script>
import * as Types from "../store/mutations-types";
import  createNamespacedHelpers  from "vuex";
const  mapActions, mapState  = createNamespacedHelpers("home");
export default 
  name: "home",
  created() 
    // 异步请求 不需要被监控的数据 初始化数据
    // this.$store.dispatch(`home/$Types.SET_SLIDER`);
    this[Types.SET_SLIDER]();
  ,
  computed: 
    ...mapState(["sliders"])
  ,
  methods: 
    ...mapActions([Types.SET_SLIDER])
  
;
</script>