求助：Pinia Stores桌面端运行异常，笔记本端可正常工作

问题现象 #

• 团队Vue（搭配Vuetify）项目使用Pinia做状态管理，笔记本及其他成员设备运行正常，但桌面端Pinia完全失效，已确认两台设备应用配置一致，且多次重装桌面端环境
• 笔记本加载应用时，控制台会输出🍍 "currentUser" store installed 🆕提示，可正常访问store，Vue开发者工具显示Pinia标签页
• 桌面端加载应用时无上述store安装提示，所有store值均以ref形式返回（带有__V_isRef: true标识），但Vue开发者工具仍会显示Pinia标签页
• 笔记本执行console.log()能获取store预期值，桌面端执行相同操作返回结果：

{
  value: false,
  __V_isRef: true,
  get value: function value(){},
  set value: function value(){},
}

特殊情况 #

• 以下测试代码在CodePen等在线环境可正常运行，怀疑是本地Node/Vue/Vuetify的环境冲突，求排查方向：

测试JS代码 #

const useCounterStore = Pinia.defineStore('counter', {
  state() {
    return {
      value: 0
    }
  },
  actions: {
    increment(state) {
      this.value++
    },
  }
})

Vue.use(Pinia.PiniaVuePlugin)
new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    pinia: Pinia.createPinia(),
    computed: {
      ...Pinia.mapState(useCounterStore, ['value'])
    },
    methods: {
      ...Pinia.mapActions(useCounterStore, ['increment', 'incrementBugged'])
    },
})

测试HTML代码 #

<!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
    <v-app>
        <v-main>
            <v-container>Count is: {{ value }}</v-container>
            <button @click="increment">Click here, works on both my desktop and laptop</button>
        </v-main>
    </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<script src="https://unpkg.com/@vue/composition-api"></script>
<script src="https://unpkg.com/vue-demi"></script>
<script src="https://unpkg.com/pinia"></script>

</body>
</html>

排查方向建议 #

1. 依赖版本一致性校验
   • 对比两台设备的package-lock.json/yarn.lock，确保Vue、Vuetify、Pinia、@vue/composition-api、vue-demi的版本完全一致
   • 执行npm list vue vuetify pinia @vue/composition-api vue-demi查看依赖树，确认无嵌套版本冲突
2. Node.js版本排查
   • 用node -v检查两台设备的Node.js版本，Vue 2+Pinia组合对Node版本有兼容要求，建议切换到项目指定版本（用nvm/nvs管理）
3. 缓存与依赖重装
   • 清理桌面端包管理器缓存：npm cache clean --force或yarn cache clean
   • 删除node_modules和锁文件后重装：rm -rf node_modules package-lock.json && npm install
4. Vue开发者工具验证
   • 在桌面端Vue DevTools的Pinia标签页中，确认store是否真实存在、状态是否正确，区分是代码访问问题还是日志输出问题
5. Pinia初始化顺序检查
   • 确认项目中先执行Vue.use(Pinia.PiniaVuePlugin)，再创建Vue实例并传入pinia实例，避免初始化顺序颠倒
6. 环境变量差异排查
   • 检查桌面端是否存在特殊环境变量（如NODE_ENV、VUE_APP_*）导致Pinia进入异常运行模式，对比笔记本的环境变量配置
7. 模块导入方式校验
   • 确保项目中Pinia的导入方式统一，避免混合使用ES模块导入和全局引入，保证所有store基于同一个Pinia实例定义和访问

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