当前位置: 首页 > news >正文

uni-app中使用pinia

目录

Pinia 是什么?

uni-app 使用Pinia

main.js 中引用pinia

创建和注册模块

定义pinia方式

选项options方式 定义pinia

页面中使用 pinia选项options方式

函数方式 定义pinia

页面中使用 函数方式 定义的pinia


Pinia 是什么?

Pinia(发音为 /piːnjʌ/,如英语中的 peenya) 是 Vue 的存储库,它允许您跨组件、页面共享状态。

在服务器端以及小型单页应用程序中,您也可以从使用 Pinia 中获得很多好处:

  • Devtools 支持

    • 追踪 actions、mutations 的时间线

    • 在组件中展示它们所用到的 Store

    • 让调试更容易的 Time travel

  •  热模块更换

    • 不必重载页面即可修改 Store

    • 开发时可保持当前的 State

  • 为 JS 开发者提供适当的 TypeScript 支持以及 自动补全 功能。

图片

uni-app 使用Pinia

uni-app 内置了 Pinia 。Vue 2 项目暂不支持

使用 HBuilder X 不需要手动安装,直接使用即可。使用 CLI 需要手动安装,执行 yarn add pinia@2.0.33 或 npm install pinia@2.0.33

uni-app已经内置了vuex和pinia两个状态管理,不需要安装即可使用。

建议项目结构

├── pages
├── static
└── stores // 注意此处└── counter.js
├── App.vue
├── main.js
├── manifest.json
├── pages.json
└── uni.scss

main.js 中引用pinia

mian.js 引用并使用pinia

//导入pinia
import * as Pinia from  'pinia'// 创建Pinia实例  // 将pinia实例挂载到vue实例上 
app.use(Pinia.createPinia());return {app,Pinia, // 此处必须将 Pinia 返回
} 

main.js完整代码

// #ifndef VUE3
import Vue from 'vue'
import App from './App' Vue.config.productionTip = falseApp.mpType = 'app'const app = new Vue({...App
})
app.$mount()
// #endif// #ifdef VUE3
import { createSSRApp } from 'vue'//导入pinia  
import * as Pinia from  'pinia'import App from './App.vue'
export function createApp() {const app = createSSRApp(App)// 创建Pinia实例  // 将pinia实例挂载到vue实例上 app.use(Pinia.createPinia());return {app,Pinia, // 此处必须将 Pinia 返回}
}
// #endif

请特别注意pinia引用位置,否则会报错

图片

创建和注册模块

在需要使用全局状态管理的地方,你可以创建一个或多个Pinia模块。每个模块代表一个具体的状态管理单元。

项目中,新建stores文件夹,用于存储 创建和注册的模块

图片

stores文件夹,新建js文件(useCounterStore.js),用于存储 创建和注册的模块

图片

定义pinia方式

选项options方式 定义pinia

useCounterStore.js中写入如下代码

import { defineStore } from 'pinia'// 定义仓库有两种定义方式// 01 选项options方式
export const useCounterStore = defineStore('counter', {// 定义状态state:()=>({count:5}),// 计算数据getters:{doubleCount:(state)=>state.count*2},// 动作支持异步actions:{setCount(v){this.count = v;}}
})

页面中使用 pinia选项options方式

<template><view>pinia 大菠萝doubleCount:{{doubleCount}}<button>{{count}}</button></view>
</template><script>
import {useCounterStore} from "@/stores/useCounterStore.js
// map方泛
import {mapState} from 'pinia';export default {data(){},computed: function(){// 把pinia 的state映射到页面...mapState(useCounterStore,["count","doubleCount"]} ,methods:{// 把pinia的方法映射到页面...mapActions(useCounterStore,["setCount"])}
</script>

这种写法,和vuex很类似,但是少了mutation方法

函数方式 定义pinia

新建js文件(useColorStore.js),并且定义pinia

// 导入定义仓库的方法
import {defineStore} from 'pinia';// 导入响应式和计算
import {ref} from 'vue'
const  useColorStore = defineStore("color",()=>{// 定义一个状态颜色为 默认红色const color=ref('red');// 定义一个设置状态的方法const setColor = v=>{color.value = v;}// 导入return {color,setColor}
}) export default useColorStore;          

页面中使用 函数方式 定义的pinia

<template><view class="container"><button @click="setColor">更改颜色</button> <view :style="'background:'+colorStore.color">v-show="isShow"</view></view>
</template><script setup>import useColorStore from '@/stores/useColorStore.js'const colorStore = useColorStore() const setColor = () => { colorStore.setColor('#333')}  
</script> <style lang="less" scoped> .container {padding: 0 20px 20px;font-size: 14px;line-height: 24px;}
</style>

误区

图片

参考文档

  • 状态管理 Pinia | uni-app官网

相关文章:

uni-app中使用pinia

目录 Pinia 是什么&#xff1f; uni-app 使用Pinia main.js 中引用pinia 创建和注册模块 定义pinia方式 选项options方式 定义pinia 页面中使用 pinia选项options方式 函数方式 定义pinia 页面中使用 函数方式 定义的pinia Pinia 是什么&#xff1f; Pinia&#xff0…...

Spring之事务管理

文章目录 前言一、事务及其参数含义1.事务的四个特性2.事务的传播行为&#xff08;propagation&#xff09;3.事务隔离性4.事务的隔离级别&#xff08;ioslation&#xff09;5.timeout&#xff08;超时&#xff09;6.readOnly&#xff08;是否只读&#xff09;7.rollbackFor&am…...

linux常见的mysql问题

当涉及到MySQL在Linux系统上的常见问题时&#xff0c;以下是10个经常遇到的问题及其解答&#xff1a; 无法连接到MySQL服务器。 确保MySQL服务器正在运行&#xff1a;可以使用systemctl status mysql或service mysql status命令检查MySQL服务状态。确保MySQL服务器网络设置正确…...

常见分辨率时序信息

分辨率列表 分辨率一:640x480(逐行) 分辨率二:800x600(逐行) 分辨率三:1024x768(逐行) 分辨率四:大名鼎鼎720P(逐行) 注:选择720P@30帧的,需拉长HOR TOTAL TIME 分辨率五:1280x800(逐行) 分辨率六:1280x960(逐行...

机器人CPP编程基础-05完结The End

非常不可思议……之前四篇博文竟然有超过100的阅读量…… 此文此部分终结&#xff0c;没有继续写下去的必要了。 插入一个分享&#xff1a; 编程基础不重要了&#xff0c;只要明确需求&#xff0c;借助AI工具就能完成一个项目。 当然也不是一次成功&#xff0c;工具使用也需要…...

数据库应用系统DBAS功能设计与实施(三级数据库)

目录 一、了解软件体系结构及设计过程 1、软件体系结构与设计过程 2、软件设计过程 二、了解DBAS总体设计 1、DBAS体系结构设计 2、软件体系结构设计 3、软硬件选型与配置设计 4、业务规则初步设计 三、了解DBAS功能概要设计 1、表示层概要设计 2、业务逻辑层概要设计…...

快速幂典型

题目描述 求 a 乘 b 对 p 取模的值&#xff0c;其中 1≤a,b,p≤1018。 输入描述: 第一行a&#xff0c;第二行b&#xff0c;第三行p。 输出描述: 一个整数&#xff0c;表示abmodp的值。 示例1 输入 2 3 9 输出 6 #include<bits/stdc.h> using namespace std; t…...

计算机竞赛 python+opencv+机器学习车牌识别

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于机器学习的车牌识别系统 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;4分工作量&#xff1a;4分创新点&#xff1a;3分 该项目较为新颖&#xff0c;适…...

解决电脑声音正常但就是某些游戏没声音问题

电脑声音正常&#xff0c;玩普遍游戏也正常&#xff0c;就有游戏不出声音 详细介绍经过&#xff0c;不喜欢的请直接跳 第三部分。 一、先说下起因现象。 1 大富翁11 没声音。 前段时间无聊怀旧就买了个大富翁11玩玩&#xff0c;近二十年前的老台式机正常无问题。后来想在性能…...

【UniApp开发小程序】小程序首页(展示商品、商品搜索、商品分类搜索)【后端基于若依管理系统开发】

文章目录 界面效果界面实现工具js页面首页让文字只显示两行路由跳转传递对象将商品分为两列显示使用中划线划掉原价 后端商品controllerservicemappersql 界面效果 【说明】 界面中商品的图片来源于闲鱼&#xff0c;若侵权请联系删除关于商品分类页面的实现&#xff0c;请在我…...

Redis 持久化及集群架构

Redis 持久化及集群架构 本篇技术博文将深入探讨 Redis 持久化机制的原理、配置和使用方式。我们将介绍两种常用的持久化方式&#xff1a;RDB 持久化和 AOF 持久化。您将了解到它们的工作原理、优缺点以及如何根据需求选择合适的持久化方式。 通过深入学习 Redis 持久化及集群…...

FPGA + WS2812采灯控制

文章目录 一、WS2812C-2020-V11、产品概述2、引出端排列及功能3、数据传输时间4、数据传输方法 二、使用WS2812C显示图片1、静态显示2、动态显示 一、WS2812C-2020-V1 1、产品概述 WS2812C-2020-V1是一个集控制电路与发光电路于一体的智能外控LED光源&#xff1b;其外型采用最…...

【视频】使用OBS将MP4推流至腾讯云直播

1、下载OBS OBS官网:https://obsproject.com/ OBS支持Win、Mac、Linux,如果下载速度很慢,建议使用迅雷下载 2、OBS推流设置 2.1 添加场景 默认会有一个“场景”,如果想继续添加可以点击“+”按钮 2.2 添加媒体源 1)点击“来源”窗口中“+”按钮 2)支持的媒体源如…...

Vue基本知识

一、vue入门 Vue为前端的框架&#xff0c;免除了原生js的DOM操作。简化书写。 基于MVVM的思想&#xff0c;实现数据的双向绑定&#xff0c;使编程的重点放在数据上。 1、引入vue.js文件 2、定义vue核心对象&#xff0c;定义数据模型 3、编写视图 //1、引入vue.js <scr…...

item_get_sales-获取商品销量详情

一、接口参数说明&#xff1a; item_get_sales-获取商品销量详情&#xff0c;点击更多API调试&#xff0c;请移步注册API账号点击获取测试key和secret 公共参数 请求地址: https://api-gw.onebound.cn/taobao/item_get_sales 名称类型必须描述keyString是调用key&#xff08…...

LangChain手记 Memory

整理并翻译自DeepLearning.AILangChain的官方课程&#xff1a;Memory Memory 使用open ai的API调用GPT都是单次调用&#xff0c;所以模型并不记得之前的对话&#xff0c;多轮对话的实现其实是将前面轮次的对话过程保留&#xff0c;在下次对话时作为输入的message数组的一部分&…...

linux下安装.run后缀名文件

1.文件传输 对于大文件&#xff0c;不能直接拖拽&#xff0c;可以借助工具&#xff0c;例如WinSCP 创建会话时&#xff0c;需要提供虚拟机的主机名&#xff0c;可以采取输入ifconfig的命令&#xff0c;如图所示&#xff1a; ifconfig&#xff08;接口配置&#xff09;命令在 …...

Angular 性能优化实战

Angular 性能优化实战 Angular 是一个非常强大的前端框架&#xff0c;但是如果不注意性能优化&#xff0c;应用程序可能会变得非常慢并增加加载时间。 以下是一些Angular性能优化经验的实战建议&#xff1a; 1. 使用 OnPush 变更检测策略 默认情况下&#xff0c;Angular检查…...

在vue项目使用数据可视化 echarts ,柱状图、折线图、饼状图使用示例详解及属性详解

官网地址&#xff1a;Apache ECharts ​一、下载插件并在页面中引入 npm install echarts --save 页面导入&#xff1a; import * as echarts from echarts 全局导入&#xff1a; main.js 中&#xff0c;导入并注册到全局 import echarts from echarts Vue.prototype.$echart…...

九耶丨阁瑞钛伦特-井字棋html5代码

你想了解关于井字棋&#xff08;Tic-Tac-Toe&#xff09;的HTML代码吗&#xff1f;以下是一个简单的井子棋的HTML代码示例&#xff1a; <!DOCTYPE html> <html> <head><title>Tic-Tac-Toe</title><style>.board {display: flex;flex-wrap…...

网络编程(Modbus进阶)

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

comfyui 工作流中 图生视频 如何增加视频的长度到5秒

comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗&#xff1f; 在ComfyUI中实现图生视频并延长到5秒&#xff0c;需要结合多个扩展和技巧。以下是完整解决方案&#xff1a; 核心工作流配置&#xff08;24fps下5秒120帧&#xff09; #mermaid-svg-yP…...

AxureRP-Pro-Beta-Setup_114413.exe (6.0.0.2887)

Name&#xff1a;3ddown Serial&#xff1a;FiCGEezgdGoYILo8U/2MFyCWj0jZoJc/sziRRj2/ENvtEq7w1RH97k5MWctqVHA 注册用户名&#xff1a;Axure 序列号&#xff1a;8t3Yk/zu4cX601/seX6wBZgYRVj/lkC2PICCdO4sFKCCLx8mcCnccoylVb40lP...

用递归算法解锁「子集」问题 —— LeetCode 78题解析

文章目录 一、题目介绍二、递归思路详解&#xff1a;从决策树开始理解三、解法一&#xff1a;二叉决策树 DFS四、解法二&#xff1a;组合式回溯写法&#xff08;推荐&#xff09;五、解法对比 递归算法是编程中一种非常强大且常见的思想&#xff0c;它能够优雅地解决很多复杂的…...