Vue3 Options API下global-store使用报错求助及正确用法咨询

一、当前错误原因及解决 #

你遇到的Cannot read properties of undefined (reading '__vccOpts')错误，根源是把.vue组件文件当作composable函数使用。.vue文件是Vue组件，编译后会生成包含组件内部编译选项（__vccOpts）的模块，不能直接像普通函数一样调用。

修复步骤： #

1. 将StoreMajorEnableState.vue重命名为useMajorEnableState.js（composable必须是JS/TS文件，不是组件）
2. 移除文件中的<template>和<style>部分，只保留状态逻辑，改成如下结构：

// src/store/useMajorEnableState.js
import { reactive } from 'vue'

export function useMajorEnableState() {
  // 定义状态（如需全局单例，需将状态移到函数外部，见下文）
  const state = reactive({
    majorEnable: false
  })

  // 定义修改状态的方法
  const toggleMajorEnable = () => {
    state.majorEnable = !state.majorEnable
  }

  // 导出状态和方法
  return {
    state,
    toggleMajorEnable
  }
}

3. 在组件中导入并使用这个composable：

// src/components/HelloWorld.vue
import { useMajorEnableState } from '../store/useMajorEnableState'

export default {
  setup() {
    const { state, toggleMajorEnable } = useMajorEnableState()
    return {
      majorEnable: state.majorEnable,
      toggleMajorEnable
    }
  }
}

二、Options API下全局状态的正确使用方法 #

方法1：全局属性挂载（适合简单场景） #

直接把状态挂载到Vue实例的全局属性上，所有组件可通过this访问：

// main.js
import { createApp, reactive } from 'vue'
import App from './App.vue'

const app = createApp(App)
// 创建全局状态单例
const globalStore = reactive({
  majorEnable: false,
  toggleMajorEnable() {
    this.majorEnable = !this.majorEnable
  }
})
// 挂载到全局
app.config.globalProperties.$globalStore = globalStore
app.mount('#app')

组件中使用：

export default {
  computed: {
    majorEnable() {
      return this.$globalStore.majorEnable
    }
  },
  methods: {
    toggle() {
      this.$globalStore.toggleMajorEnable()
    }
  }
}

方法2：单例Composable（适合复用性强的场景） #

如果需要用composable实现全局共享，要确保状态是单例（不要在函数内部创建，否则每次调用会生成新状态）：

// src/store/useGlobalStore.js
import { reactive } from 'vue'

// 全局单例状态，放在函数外部
const globalState = reactive({
  majorEnable: false
})

export function useGlobalStore() {
  const toggleMajorEnable = () => {
    globalState.majorEnable = !globalState.majorEnable
  }

  return {
    globalState,
    toggleMajorEnable
  }
}

组件中使用和之前一致，所有组件调用useGlobalStore都会拿到同一个状态实例。

方法3：Pinia（官方推荐的复杂状态管理） #

对于中大型应用，推荐使用官方状态管理库Pinia，它天然支持Options API：

1. 安装Pinia：npm install pinia
2. 配置Pinia：

// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
app.use(createPinia())
app.mount('#app')

3. 创建Store：

// src/store/majorStore.js
import { defineStore } from 'pinia'

export const useMajorStore = defineStore('major', {
  // 状态定义
  state: () => ({
    majorEnable: false
  }),
  // 修改状态的方法
  actions: {
    toggleMajorEnable() {
      this.majorEnable = !this.majorEnable
    }
  }
})

4. Options API组件中使用：

import { mapState, mapActions } from 'pinia'
import { useMajorStore } from '../store/majorStore'

export default {
  computed: {
    // 映射状态到组件计算属性
    ...mapState(useMajorStore, ['majorEnable'])
  },
  methods: {
    // 映射方法到组件方法
    ...mapActions(useMajorStore, ['toggleMajorEnable'])
  }
}

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