vue.config.js请求数据

Posted 2021-09-06 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>