为何Pinia的useUsersStore未定义？已正确导出Store仍报错

我尝试获取Pinia的store实例时，出现了useUsersStore未定义的错误，但我的Pinia store已经正确创建并导出到组件中了。

相关代码示例 #

stores/usersStore.js #

import { defineStore } from 'pinia';

export const useUsersStore = defineStore('usersStore', {
  state: () => ({
    // 省略state内容
  })
  // 省略其他配置（如getters、actions）
})

组件代码（Filters.vue） #

export default {
  setup() {
    // 此处未导入useUsersStore，会导致未定义错误
    const usersStore = useUsersStore();

    const countries = usersStore.getCountries;
    const scores = usersStore.getScores;

    const country = ref('');
    const score = ref('');
    
    // 省略其他逻辑
  }
}

main.js #

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

const pinia = createPinia();
const app = createApp(App);

app.use(pinia);
app.mount('#app');

解决方案 #

• 在组件中导入store：这是最直接的原因，你的组件代码里缺少useUsersStore的导入语句。在组件的setup函数上方添加：

  import { useUsersStore } from '@/stores/usersStore'
  

  注意路径要根据你的项目结构调整，确保能正确找到store文件。
• 验证store的导出正确性：确认usersStore.js中确实使用export const useUsersStore导出了store，避免变量名拼写错误或者使用了默认导出（export default）却用命名导入的方式获取。
• 确保Pinia挂载顺序正确：你的main.js中已经正确将Pinia挂载到Vue实例，这部分没问题，但要保证所有使用store的组件都是在app.mount('#app')之后渲染的，避免在Pinia初始化前调用store。

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