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

uni-app开发微信小程序 vue3写法添加pinia

说明

使用uni-app开发,选择vue3语法,开发工具是HBliuderX。虽然内置有vuex,但是个人还是喜欢用Pinia,所以就添加进去了。
Pinia官网连接

添加步骤

第一步:

在项目根目录下执行命令:

npm install pinia

第二步:

配置main.js文件

// #ifdef VUE3
import { createSSRApp } from 'vue'
import * as Pinia from 'pinia';		// 配置pinia第一句
export function createApp() {const app = createSSRApp(App)// 状态管理const store = Pinia.createPinia();	// 配置pinia第二句// 持久化app.use(store);						// 配置pinia第三句return {app,Pinia								// 配置pinia第四句}
}
// #endif

第三步,使用:

创建store文件夹、创建store/index.js

import {appStore
} from "./modules/app.js"const useStore = () => ({app: appStore(),
});export default useStore;
/*** 用法* 	import useStore from "@/store/index.js"const {app} = userStore();let app = app.appIndex*/

然后创建store/modules/app.js文件

import {defineStore
} from 'pinia'
export const appStore = defineStore('app', {unistorage: true, // 是否持久化到内存state: () => {return {// 测试appIndex: 999,}},actions: {}
})

像下面这个样子:
在这里插入图片描述

使用:

在js文件夹下导入使用即可

import useStore from "@/store/index.js"const {app} = userStore();let app = app.appIndex

完整一点的示例:

<script>import useStore from "@/store/index.js"const {app} = useStore();export default {data() {return {text:"",}},methods: {getText(){this.text = app.appIndex;}}
</script>

如果有更好的方法,欢迎大家一起讨论!

相关文章:

uni-app开发微信小程序 vue3写法添加pinia

说明 使用uni-app开发&#xff0c;选择vue3语法&#xff0c;开发工具是HBliuderX。虽然内置有vuex&#xff0c;但是个人还是喜欢用Pinia&#xff0c;所以就添加进去了。 Pinia官网连接 添加步骤 第一步&#xff1a; 在项目根目录下执行命令&#xff1a; npm install pinia …...

centos三台主机配置互信ssh登录

1. 修改hosts信息 1.1三台主机上分别修改hosts文件 vi /etc/hosts1.2 三台主机分别填入如下内容&#xff0c;ip地址需要检查正确 192.168.126.223 node1 192.168.126.224 node2 192.168.126.225 node32. 秘钥生成和分发 2.1 在三台主机上分别生成秘钥 命令输入后&#xff…...

验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)

&#x1f9f8;欢迎来到dream_ready的博客&#xff0c;&#x1f4dc;相信你对这篇博客也感兴趣o (ˉ▽ˉ&#xff1b;) &#x1f4dc;表白墙/留言墙 —— 中级SpringBoot项目&#xff0c;MyBatis技术栈MySQL数据库开发&#xff0c;练手项目前后端开发(带完整源码) 全方位全步骤手…...

js/jQuery 的一些常用操作(js/jQuery获取表单元素值 以及 清空元素值的各种实现方式)——附测试例子,拿来即能实现效果

js/jQuery 的一些常用操作&#xff08;js/jQuery获取表单元素值 以及 清空元素值的各种实现方式&#xff09;——附测试例子&#xff0c;拿来即能实现效果 1. 前言2. 获取表单元素的值2.1 简单获取元素中的值2.1.1 根据 id 简单取值2.2.2 根据name 简单取值2.1.3 获取单选按钮的…...

h5(react ts 适配)

一、新建项目并放在码云托管 1、新建项目&#xff1a;react ts h5 考虑到这些 用 create-react-app 脚手架来搭建项目。 首先&#xff0c;确保你已经安装了 Node.js。如果没有安装&#xff0c;请先从官方网站 https://nodejs.org/ 下载并安装 Node.js。打开命令行工具&#x…...

计算机视觉:驾驶员疲劳检测

目录 前言 关键点讲解 代码详解 结果展示 改进方向&#xff08;打哈欠检测疲劳方法&#xff09; 改进方向&#xff08;点头检测疲劳&#xff09; GUI界面设计展示 前言 上次博客我们讲到了如何定位人脸&#xff0c;并且在人脸上进行关键点定位。其中包括5点定位和68点定…...

Vue向pdf文件中添加二维码

&#x1f680; 场景一&#xff1a;利用vue向pdf文件中写入二维码图片或其他图片 &#x1f680; 场景二&#xff1a;向pdf中添加水印 思路&#xff1a; 1、先通过url链接生成二维码&#xff0c;二维码存在于dom中 2、使用html2canvas库将二维码的dom转为一个canvas对象 3、根据c…...

idea一键打包docker镜像并推送远程harbor仓库的方法(包含spotify和fabric8两种方法)--全网唯一正确,秒杀99%水文

我看了很多关于idea一键打包docker镜像并推送harbor仓库的文章&#xff0c;不论国内国外的&#xff0c;基本上99%都是瞎写的&#xff0c; 这些人不清楚打包插件原理&#xff0c;然后就是复制粘贴一大篇&#xff0c;写了一堆垃圾&#xff0c;然后别人拿来也不能用。 然后这篇文…...

程序设计:C++11原子 写优先的读写锁(源码详解二:操作跟踪)

本文承接程序设计&#xff1a;C11原子 写优先的读写锁&#xff08;源码详解&#xff09;-CSDN博客 上文已经列出了完整代码&#xff0c;完整代码里面增加了操作跟踪&#xff0c;这里就讲解一下这部分是如何实现的。 操作跟踪有两个层面&#xff1a;进程层面和线程层面。 由于这…...

Django视图层解析

Django视图&#xff08;View&#xff09;是Django Web框架中负责处理HTTP请求和返回HTTP响应的组件。视图是一段Python代码&#xff0c;接收HTTP请求作为输入&#xff0c;处理请求并返回HTTP响应作为输出。Django视图的主要目的是实现Web应用程序的业务逻辑&#xff0c;将模型和…...

JAVA使用RXTXcomm进行串口通信(一)

首先下载相应的jar文件 压缩包包括:RXTXcomm.jar(64位环境)、win32com.dll和javax.comm.properties。 下载地址:https://www.aliyundrive.com/s/JSeSQsAyYeZ 点击链接保存&#xff0c;或者复制本段内容&#xff0c;打开「阿里云盘」APP &#xff0c;无需下载极速在线查看&#…...

Vue+ElementUI技巧分享:自定义表单项label的文字提示

文章目录 概要在表单项label后添加文字提示1. 使用 Slot 自定义 Label2. 添加问号图标与提示信息 slot的作用详解1. 基本用法2. 具名插槽 显示多行文字提示的方法1. 问题背景2. 实现多行内容显示3. 样式优化 结语 概要 在Vue和ElementUI的丰富组件库中&#xff0c;定制化表单是…...

【QML】警告Name is declared more than once

1. 问题&#xff1a; qml函数中的不同块中定义同名变量&#xff0c;报警&#xff1a;Name is declared more than once 举例&#xff1a; function test(a){if(a "1"){var re 1;console.log(re);}else{var re 2; //这里会报警&#xff1a;Name is declared mor…...

【自用总结】正项级数审敛法的总结

注&#xff1a;收敛半径的求法就是lim n->∞ |an1/an| ρ&#xff0c;而ρ1/R&#xff0c;最基本的不能忘。 比较判别法&#xff1a;从某项起&#xff0c;该级数后面的项均小于等于另一级数&#xff0c;则敛散性可进行一定的比较 可以看到&#xff0c;比较判别法实际上比较…...

ARMv8平台上安装QT开发环境

安装Qt Creator sudo -iapt-get update apt-get upgrade apt list --installed | grep -v oldstable | cut -d/ -f1 | xargs apt-mark unholdapt-get install gcc g clang make-guile build-essential qtbase5-dev qtchooser qt5-qmake qtbase5-dev-tools qtcreator qt5* 配置…...

基于人工电场算法优化概率神经网络PNN的分类预测 - 附代码

基于人工电场算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于人工电场算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于人工电场优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针对PNN神…...

在服务器导出kafka topic数据

使用Kafka自带的工具&#xff1a;Kafka提供了一个命令行工具kafka-console-consumer&#xff0c;可以用来消费指定Topic的数据并将其打印到控制台。 1.打印到控制台 命令如下&#xff1a; kafka-console-consumer.sh --bootstrap-server $kafkaHost --topic $topicName --from-…...

农户建档管理系统的设计与实现-计算机毕业设计源码20835

摘 要 随着互联网趋势的到来&#xff0c;各行各业都在考虑利用互联网将自己推广出去&#xff0c;最好方式就是建立自己的互联网系统&#xff0c;并对其进行维护和管理。在现实运用中&#xff0c;应用软件的工作规则和开发步骤&#xff0c;采用Java技术建设农户建档管理系统。 本…...

uniapp的Vue2,Vue3配置跨域(proxy代理)

vue2 找到manifest.json文件&#xff0c;通过源码视图的方式打开文件&#xff1a;在文件中添加一下代码即可完成代理&#xff1a; "h5": {"devServer": {"disableHostCheck": true, //禁止访问本地host文件"port": 8000, //修改项目…...

处理BOP数据集,将其和COCO数据集结合

处理BOP数据集&#xff0c;将其和COCO数据集结合 BOP 取消映射关系&#xff0c;并自增80 取消文件名的images前缀 import os import json from tqdm import tqdm import argparseparser argparse.ArgumentParser() parser.add_argument(--json_path, defaultH:/Dataset/COCO…...

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

站群服务器的应用场景都有哪些?

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

Kafka主题运维全指南:从基础配置到故障处理

#作者&#xff1a;张桐瑞 文章目录 主题日常管理1. 修改主题分区。2. 修改主题级别参数。3. 变更副本数。4. 修改主题限速。5.主题分区迁移。6. 常见主题错误处理常见错误1&#xff1a;主题删除失败。常见错误2&#xff1a;__consumer_offsets占用太多的磁盘。 主题日常管理 …...

Ubuntu系统复制(U盘-电脑硬盘)

所需环境 电脑自带硬盘&#xff1a;1块 (1T) U盘1&#xff1a;Ubuntu系统引导盘&#xff08;用于“U盘2”复制到“电脑自带硬盘”&#xff09; U盘2&#xff1a;Ubuntu系统盘&#xff08;1T&#xff0c;用于被复制&#xff09; &#xff01;&#xff01;&#xff01;建议“电脑…...