vue3从本地获取数据

在 Vue3 中从本地获取数据可以通过以下步骤实现：

1. 定义一个 data 对象，用于存储数据。

import { reactive } from 'vue';

const data = reactive({
  message: '',
  list: []
});

2. 在组件的 setup 函数中，使用 fetch 或 axios 等工具从本地获取数据，并将数据存储到 data 对象中。

import { reactive } from 'vue';
import axios from 'axios';

const data = reactive({
  message: '',
  list: []
});

export default {
  setup() {
    axios.get('/api/data.json').then(response => {
      data.message = response.data.message;
      data.list = response.data.list;
    });
  }
}

3. 在组件中使用 data 对象中的数据。

<template>
  <div>
    <p>{{ data.message }}</p>
    <ul>
      <li v-for="item in data.list" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

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

const data = reactive({
  message: '',
  list: []
});

export default {
  setup() {
    axios.get('/api/data.json').then(response => {
      data.message = response.data.message;
      data.list = response.data.list;
    });

    return {
      data
    }
  }
}
</script>

以上是一个简单的示例，你可以根据自己的需求进行相应的修改。