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

我在uniapp项目中引入Pinia时遇到"Pinia is not defined"错误，已经按照文档安装了pinia和@pinia/nuxt，并在main.js中正确导入和使用：

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

但页面组件中使用const store = useStore()时仍报错。尝试过清除缓存、重启服务，问题依旧。请问如何解决？

2 回复

在uniapp中使用pinia报错is not defined，通常是因为没有正确引入和配置。

解决方法：

  1. 确保已安装pinia：npm install pinia
  2. 在main.js中引入并挂载：
import { createPinia } from 'pinia'
const pinia = createPinia()
app.use(pinia)
  1. 在页面中使用时正确导入：
import { useStore } from '@/store'

检查以上配置即可解决。


在UniApp中使用Pinia时出现"Pinia is not defined"错误，通常是由于Pinia未正确安装或配置导致的。以下是解决方案：

1. 安装Pinia

npm install pinia
# 或
yarn add pinia

2. 在main.js中配置

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

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

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

3. 在页面/组件中使用

import { defineStore } from 'pinia'

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

4. 常见问题排查

  • 检查Pinia版本兼容性：确保Pinia版本与Vue版本兼容
  • 重启开发服务器：安装后重启 npm run dev
  • 检查导入路径：确保正确导入Pinia
  • 查看控制台错误：检查是否有其他相关错误信息

5. 完整示例

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

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

// 页面中使用
import { useCounterStore } from '@/stores/counter'

export default {
  setup() {
    const counter = useCounterStore()
    return { counter }
  }
}

按照以上步骤配置后，"Pinia is not defined"错误应该就能解决。

回到顶部