案例-数据渲染

发送请求，获得猫眼电影的数据
https://m.maoyan.com/ajax/movieOnInfoList?token=&optimus_uuid=F04A6B70984011EB89DA9FC9709563EEE1FC4395B1554473B6696781D0EF2CDC&optimus_risk_level=71&optimus_code=10

vue.config.js
解决跨域问题

module.exports = {
  devServer: {
    proxy: {
      "/ajax": {
        target: "https://m.maoyan.com",
        changeOrigin: true,
      },
    },
  },
};

scr/api/index.ts 数据请求写在该文件 统一一处书写数据请求，方便后期的测试和维护
发送数据请求

import axios from "axios";
export const getMovieReq = () => {
    return axios({
      url: "/ajax/movieOnInfoList",
      params: {
        token: "",
        optimus_uuid:
          "F04A6B70984011EB89DA9FC9709563EEE1FC4395B1554473B6696781D0EF2CDC",
        optimus_risk_level: 71,
        optimus_code: 10,
      },
    });
};

src/store/index.ts vuex

import { createStore } from "vuex";
import * as api from "../api";
const store = createStore({
  modules: {
    moviesStore: {
      namespaced: true,
      state: {
        movise: [],
      },
      actions: {
        async getMovise(store) {
          // todo 1、发送数据请求
          const res = await api.getMovieReq(); // 发送请求
          // console.log(res.data.movieList);
          // todo 2、创建action
          const action = {
            type:'GETMOVISE',
            payload:res.data.movieList
          }
          // todo 3、发送action
          store.commit(action)
        },
      },
      mutations: {
        GETMOVISE(state,action){
          state.movise=action.payload;
        }
      },
    },
  },
});
export default store;

<template>
  <div>
    <ul>
      <li v-for="item in moviseList" :key="item.id">
        <h3>{{ item.nm }}</h3>
        <img :src="item.img.replace('w.h', '128.180')" alt="" />
      </li>
    </ul>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  setup() {
    const store = useStore();
    const moviseList = computed(() => store.state.moviesStore.movise);
    onMounted(() => {
      store.dispatch({
        type: "moviesStore/getMovise",
      });
    });
    return {
      moviseList,
    };
  },
});
</script>