為什么一旦我將 axios.get() 數據傳遞給反應性 object vuejs，我就無法訪問它？

Question

我對 Vue 很陌生，我正在做的事情真的很簡單，我認為一定是一些反應性問題，問題是我正在做一個 axios.get()，當我 console.log(res.data ) 它顯示一切正常。 但是當我嘗試讓 res.data = reactive object 它只記錄這個⇾代理{}（就像里面什么都沒有）我留下代碼和2張圖片，每個場景一次。 console.log res.data 時的代碼，沒關系：

<script>
import { onMounted, reactive, ref } from 'vue';
import axios from 'axios';

export default {
  name: 'HomeView',
  setup() {

    const state = reactive({
      destinations: []
    })

    const destinations = ref([]);

  onMounted( () => {
      axios.get('https://my-json-server.typicode.com/Tommydemian/vue-school-router/db')
      .then(response => response.data.destinations)
      .then( data => console.log(data) )
  }) 
    return {
      state
    }
  }
}
</script>

這是回應：

這是代碼和來自console.log的圖像的變化：

const state = reactive({
      destinations: []
    })

  onMounted( () => {
      axios.get('https://my-json-server.typicode.com/Tommydemian/vue-school-router/db')
      .then(response => response.data.destinations)
      .then( data => (state.destinations = data) )
  })
    console.log(state.destinations)

圖像：

Answer 1

您沒有將 axios 響應的值分配給 state，請嘗試：

onMounted(async () => {
  const response = await axios.get(
    "https://my-json-server.typicode.com/Tommydemian/vue-school-router/db"
  );
  state.destinations = response.data.destinations;
});

注意：onMounted 下的 console.log 顯示 state 為空，因為它是異步的，並且 console.log 在 function 之前運行。

在此處檢查沙箱