uniapp中使用pinia报错pinia is not defined如何解决？

在uniapp项目中引入pinia时遇到报错"pinia is not defined"，请问如何解决？已按照官方文档安装并配置pinia，但在页面中使用时仍然提示该错误。具体代码如下：

import { defineStore } from 'pinia'

是否还需要其他特殊配置？项目使用vue3+uniapp，环境配置应该没问题。求遇到相同问题并解决的大佬指点！

2 回复

在main.js中引入并挂载Pinia：

import { createPinia } from 'pinia'
const pinia = createPinia()
app.use(pinia)

确保已安装pinia依赖，检查import路径是否正确。


在UniApp中使用Pinia时出现"pinia is not defined"错误，通常是由于Pinia实例未正确创建或挂载导致的。以下是几种解决方案：

解决方案

1. 检查Pinia安装和引入

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

const app = createSSRApp(App)
const pinia = createPinia()

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

2. 检查store文件引入

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})

3. 在组件中正确使用

<template>
  <view>{{ store.count }}</view>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter'

const store = useCounterStore()
</script>

常见问题排查

  1. 确保Pinia已安装：npm install pinia
  2. 检查package.json中是否有pinia依赖
  3. 重启开发服务器：修改配置后重启
  4. 检查文件路径：确保store文件路径正确

完整示例配置

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

export function createApp() {
  const app = createSSRApp(App)
  const pinia = createPinia()
  
  app.use(pinia)
  
  return {
    app,
    pinia
  }
}

按照以上步骤检查配置，通常可以解决"pinia is not defined"的问题。

回到顶部