Vue3+Vite+Pinia组件混合写法下store未定义报错的解决求助

原因分析 #

在<script setup>语法糖中声明的变量（包括Pinia store实例）属于模块局部作用域，无法直接在选项式API的methods、computed等选项中访问，这就是触发store is not defined错误的核心原因。

解决方案 #

方案1：统一使用<script setup>语法（推荐） #

既然已经采用<script setup>，直接将getData定义为顶层函数，即可正常访问store实例：

<script setup>
import { useIncidentStore } from '@/stores/incidentStore'
const store = useIncidentStore()

// 直接定义getData函数
const getData = () => {
  console.log('选中的城市：', store.city)
}
</script>

<template>
  <select @change="(e) => { store.setCity(e.target.value); getData() }">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
  </select>
</template>

方案2：兼容选项式API写法（仅用于遗留代码场景） #

如果必须保留选项式的methods，可通过getCurrentInstance将store挂载到组件实例上：

<script setup>
import { useIncidentStore, getCurrentInstance } from 'vue'
const store = useIncidentStore()
const instance = getCurrentInstance()
// 将store挂载到组件实例的proxy上
instance.proxy.$incidentStore = store
</script>

<script>
export default {
  methods: {
    getData() {
      console.log('选中的城市：', this.$incidentStore.city)
    }
  }
}
</script>

<template>
  <select @change="(e) => { $incidentStore.setCity(e.target.value); getData() }">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
  </select>
</template>

额外验证提示 #

确保你的incidentStore已正确定义状态和方法：

// stores/incidentStore.js
import { defineStore } from 'pinia'
export const useIncidentStore = defineStore('incident', {
  state: () => ({
    city: ''
  }),
  actions: {
    setCity(cityName) {
      this.city = cityName
    }
  }
})

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