如何在Composition API中全局使用Vuex store，免除重复导入步骤

你之前的写法报错是因为.component()是Vue用于注册全局组件的API，仅支持传入组件对象，不能用来挂载store这类全局实例。下面是两种可行的实现方案：

方案1：挂载为Vue全局属性（无需额外依赖） #

该方案不需要安装第三方插件，适合轻量项目使用：

1. 调整app.js注册逻辑：

require('./bootstrap');

import {createApp} from 'vue';
import app from "../vue/app";
import store from "./store";

const vueApp = createApp(app)
vueApp.use(store)
// 挂载为全局属性，$前缀是Vue约定的全局变量命名规范，避免和组件内部变量冲突
vueApp.config.globalProperties.$store = store
vueApp.mount("#app");

2. 组件内调用方式：

• 选项式API可直接调用，无需任何导入：

this.$store.state.image = "..."

• 组合式API只需导入一次getCurrentInstance，无需每次导入vuex相关API：

import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
proxy.$store.state.image = "..."

方案2：自动导入插件实现完全免导入 #

如果要完全省略所有导入代码，直接在组件内写store.state.image = "..."，可以使用unplugin-auto-import插件实现：

1. 安装插件：
   npm install unplugin-auto-import -D
2. 调整打包工具配置（以Vite为例，webpack用法基本一致）：

import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: [
        'vue',
        'vuex',
        // 自定义导入store实例，直接映射为全局变量
        {
          './src/store.js': [ // 路径替换为你实际的store.js存放路径
            ['default', 'store']
          ]
        }
      ],
      dts: true, // 自动生成类型声明文件，TS项目也可正常使用
      eslintrc: {
        enabled: true // 避免eslint报变量未定义错误
      }
    })
  ]
})

配置完成后重启项目，所有组件内都可以直接调用store变量，无需写任何导入代码。

内容的提问来源于stack exchange，提问作者Artur Müller Romanov