Vue3中无需使用Vuex的异步数据跨组件共享最优方案是什么？

无需使用Vuex的实现方案共有3种，可根据你的实际场景选择： #

方案1：Pinia（Vue官方推荐的Vuex替代方案，适合中大型项目） #

• Pinia是Vue3官方推出的新一代状态管理工具，砍掉了Vuex中冗余的mutations概念，直接在actions中即可修改状态，同样支持跨组件/插件状态共享、响应式更新、devtools调试，从Vuex迁移成本极低。
• 示例代码：
  1. 定义Store

  // stores/apiData.js
  import { defineStore } from 'pinia'
  import axios from 'axios'
  
  export const useApiDataStore = defineStore('apiData', {
    state: () => ({
      content: null
    }),
    actions: {
      async fetchData() {
        const res = await axios.get('你的接口地址')
        this.content = res.data
      }
    }
  })
  

  2. 组件内使用

  <script setup>
  import { useApiDataStore } from '@/stores/apiData'
  import { storeToRefs } from 'pinia'
  
  const apiStore = useApiDataStore()
  // 解构出响应式状态
  const { content } = storeToRefs(apiStore)
  // 调用接口拉取数据，也可在插件内调用
  apiStore.fetchData()
  </script>
  
  <template>
    <div>{{ content }}</div>
  </template>
  

方案2：全局响应式变量（适合轻量场景，零额外依赖） #

• Vue3的ref/reactive本身具备响应式能力，你可以直接将数据和请求逻辑封装到独立模块中，导出的响应式变量所有引用方共享同一份实例，修改时自动触发所有关联视图更新，不需要引入任何状态管理库。
• 示例代码：
  1. 封装全局数据模块

  // utils/globalApiData.js
  import { ref } from 'vue'
  import axios from 'axios'
  
  export const apiData = ref(null)
  
  export async function fetchApiData() {
    const res = await axios.get('你的接口地址')
    apiData.value = res.data
  }
  

  2. 组件内使用

  <script setup>
  import { apiData, fetchApiData } from '@/utils/globalApiData'
  
  fetchApiData()
  </script>
  
  <template>
    <div>{{ apiData }}</div>
  </template>
  

• 优缺点：优势是代码量极少、无额外依赖；劣势是没有内置状态修改日志、devtools追踪，不适合复杂状态协同场景。

方案3：Provide/Inject 原生API（适合Vue3插件开发场景） #

• Vue3内置的依赖注入API可以直接在插件安装时将响应式数据和请求方法全局注入，所有子孙组件都可以直接获取数据，不需要层层传参，也不需要依赖外部状态管理库，非常适合插件封装场景。
• 示例代码：
  1. 插件实现

  // plugins/apiData.js
  import { ref } from 'vue'
  import axios from 'axios'
  
  export default {
    install(app) {
      const apiData = ref(null)
      
      async function fetchApiData() {
        const res = await axios.get('你的接口地址')
        apiData.value = res.data
      }
      // 全局注入
      app.provide('apiData', apiData)
      app.provide('fetchApiData', fetchApiData)
      // 兼容选项式API调用
      app.config.globalProperties.$apiData = apiData
    }
  }
  

  2. 注册插件

  // main.js
  import { createApp } from 'vue'
  import ApiDataPlugin from './plugins/apiData'
  import App from './App.vue'
  
  createApp(App).use(ApiDataPlugin).mount('#app')
  

  3. 组件内使用

  <script setup>
  import { inject } from 'vue'
  
  const apiData = inject('apiData')
  const fetchApiData = inject('fetchApiData')
  
  fetchApiData()
  </script>
  
  <template>
    <div>{{ apiData }}</div>
  </template>
  

内容的提问来源于stack exchange，提问作者dype