vue3 的响应式变量在axios.then方法中修改值后，并未会显到页面中

这种情况可能是因为 Vue 的响应式系统侦测不到该变量的变化。Vue 3 中的响应式变量是通过 `ref` 或 `reactive` 创建的，而在 `axios.then` 方法中修改变量的值时，可能会破坏响应式系统的侦测。解决这个问题的方法是，可以使用 Vue 3 提供的 `watchEffect` API 监听变量的变化，例如：

import { ref, watchEffect } from 'vue';

const data = ref([]);

axios.get('/api/data').then(response => {
  data.value = response.data;
});

watchEffect(() => {
  // 在这里访问 data.value，Vue 会自动侦测其变化并更新视图
});

在 `watchEffect` 中访问 `data.value`，Vue 会自动侦测其变化并更新视图。这样就可以解决在 `axios.then` 方法中修改响应式变量值后没有更新视图的问题。

相关问题

Axios.prototype.$axios = axios在vue3中如何peizhi

在Vue 3中，我们可以使用provide和inject来实现类似Vue 2中的Vue.prototype.$http = axios的功能。具体实现方法如下：

1. 在Vue 3中，我们可以在main.js文件中创建一个axios实例，并将其作为provide的值：

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'

const app = createApp(App)

app.provide('axios', axios.create({
  baseURL: 'http://localhost:3000/api'
}))

app.mount('#app')

2. 在组件中，我们可以使用inject来获取provide提供的axios实例：

<template>
  <div>
    <h1>Posts</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

<script>
import { inject } from 'vue'

export default {
  name: 'PostList',
  setup() {
    const axios = inject('axios')
    const posts = ref([])

    axios.get('/posts')
      .then(response => {
        posts.value = response.data
      })

    return {
      posts
    }
  }
}
</script>

在这个例子中，我们使用inject获取了provide提供的axios实例，并在组件的setup函数中使用它发送了一个GET请求，将响应结果赋值给了一个ref变量。需要注意的是，我们在provide和inject中使用的键名必须是字符串类型，而且需要保持一致。

axios.post().then(function(resp)中ImportOne.vue:74 Uncaught (in promise) TypeError: Cannot read properties of undefined

这个错误通常是由于this指向不正确导致的。在axios.post().then(function(resp)中，this指向的是回调函数本身，而不是Vue实例。因此，当你尝试访问Vue实例中的数据时，会出现“Cannot read properties of undefined”错误。为了解决这个问题，你可以使用箭头函数或将this存储在变量中，以便在回调函数中使用它。以下是两种解决方法：

1.使用箭头函数

this.axios({
  method: 'post',
  params: {
    yhm: this.yhm,
    pwd: this.pwd
  },
  url: 'http://localhost:1111/01/zhuce'
}).then((resp) => {
  console.log(resp.data);
  this.mes = resp.data;
})

2.将this存储在变量中

var vm = this;
this.axios({
  method: 'post',
  params: {
    yhm: this.yhm,
    pwd: this.pwd
  },
  url: 'http://localhost:1111/01/zhuce'
}).then(function(resp) {
  console.log(resp.data);
  vm.mes = resp.data;
})