logo 范 · 拾光录
网址收集 关于作者 Github Gitee
杂文随笔4
Hexo博客:基础使用Hexo博客:Next主题Hexo博客:Next进阶使用Hexo博客:Next高级配置
前端编程3
前端基础知识16
UniApp15
Vue框架19
Java编程7
Java基础知识14
SpringBoot31
SpringMVC14
MyBatis8
SpringCloud15
RocketMQ1
MyCat1
数据库4
MySQL6
Redis7
MongoDB10
H21
Java技术栈4
知识整理分布式锁的实现方案MySQL事务MySQL的锁
软件工具箱14
IDEAGitMavenGradleNginx安装Nginx配置JMeter压测OllamaPicGoRustFSVSCodeDockerObsidianObs录制
Linux知识11
树莓派安装及使用ArchLinux:常用软件ArchLinux:基础系统安装ArchLinux:深度优化ArchLInux:图形化界面安装ArchLinux:Nirifrp内网穿透Jar启动脚本Linux常用命令VirtualBox安装CentOSVirtualBox安装Ubuntu
Python编程6
Python基础知识Python语法yolo目标检测OpenCV的使用及树莓派平台condauv
创意设计2
Blender:入门知识UI设计基础知识
AI相关9
Claude CodeHermes AgentOpenAI基本使用OpenAI工具调用OpenAI记忆管理OpenAI推理执行OpenAI开发框架Langchainllama.cpp

安装和配置

HBuilderX 4.14版本开始,uni-app已内置了Pinia,无需手动安装,直接在main.js中配置即可

import App from './App'
import { createSSRApp } from 'vue'
// 1. 引入 Pinia
import * as Pinia from 'pinia'

export function createApp() {
    const app = createSSRApp(App)
    // 2. 创建 Pinia 实例并挂载到应用上
    app.use(Pinia.createPinia())
    
    return {
        app,
        Pinia // 3. 切记将 Pinia 返回,这是必须的步骤
    }
}

然后在项目根目录创建sotres/index.js

import {
  defineStore
} from 'pinia'

// 定义 Store
export const useStore = defineStore('storeId', {
  // 存储状态数据
  state: () => ({
    name: '游客',
  }),
})

使用方式

<script setup>
// 使用
import { useStore } from '../../stores/index.js'
const store = useStore()

console.log(store.name)
</script>
安装和配置
使用方式