Vue3基础——响应式 API 做简单状态管理、axios实现前后端交互、vite 配置跨域请求、mockjs模拟获取数据、 Vuex状态管理的应用、模块化管理vuex

p30 Vue3中如何设置状态管理

npm init vite-app projectname
cd projectname
yarn
yarn dev

用响应式 API 做简单状态管理

import {
    reactive } from 'vue'


const store = reactive({
   
    state: {
   
        message: 'helloworld'
    },
    setMessage(value) {
   
        this.state.message = value
    }
})


export default store

<template>
  <h1>{
  { store.state.message }}</h1>
</template>

<script>
import store from "../store/index";
export default {
     
  setup() {
     
    return {
     
      store,
    };
  },
};
</script>

p31 Vue3中如何使用axios实现前后端交互

import {
    reactive } from 'vue'


const store = reactive({
   
    loveList: [],
    setList(content) {
   
        this.loveList = content
    }
})


export default store

<template>
  <h1>{
  { store.loveList }}</h1>
</template>

<script>
import store from "./store/index";
export default {
     
  setup() {
     
      // 每日情话 api
    let api = "https://api.uomg.com/api/rand.qinghua";
    fetch(api)
      .then((res) => res.json())
      .then((result) => {
     
        console.log(result);
        store.setList(result.content);
      });

    return {
     
      store,
    };
  },
};
</script>

yarn add axios --save

<template>
  <h1>{
  { store.loveList }}</h1>
</template>

<script>
import store from "./store/index";
import axios from "axios";
export default {
     
  setup() {
     
    let api = "https://api.uomg.com/api/rand.qinghua";
    axios.get(api).then((result) => store.setList(result.data.content));
    return {
     
      store,
    };
  },
};
</script>

p32 vite 配置跨域请求

// 王者荣耀官网 找的一个url
    let api = "https://pvp.qq.com/web201605/js/herolist.json";

根目录下新建vite.config.js

module.exports = {
   
    proxy: {
   
        '/api': {
   
            target: "https://pvp.qq.com/",
            changeOrigin: true, // 是否允许跨域
            rewrite: path => path.replace(/^\/api/, '')
        }
    }
}

<template>
  <ul v-for="(item, index) in store.loveList" :key="index">
    <li>{
  { item.cname }} - {
  { item.title }}</li>