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>

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/146263.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【咖啡品牌分析】Google Maps数据采集咖啡市场数据分析区域分析热度分布分析数据抓取瑞幸星巴克

引言 咖啡作为一种受欢迎的饮品&#xff0c;已经成为我们生活中不可或缺的一部分。随着国内外咖啡品牌的涌入&#xff0c;新加坡咖啡市场愈加多元化和竞争激烈。 本文对新加坡咖啡市场进行了全面的品牌门店数占比分析&#xff0c;聚焦于热门品牌的地理分布、投资价值等。通过…

Linux:常见指令

个人主页 &#xff1a; 个人主页 个人专栏 &#xff1a; 《数据结构》 《C语言》《C》 文章目录 前言一、常见指令ls指令pwd指令cd指令touch指令mkdir指令rmdir指令rm指令man指令cp指令mv指令cat指令tac指令echo指令more指令less指令head指令tail指令date显示Cal指令find指令gr…

软件测试 —— 常见的自动化测试架构!

一个自动化测试架构就是一个集成体系&#xff0c;其中定义了一个特殊软件产品的自动化测试规则。这一体系中包含测试功能函数库、测试数据源、测试对象识别标准&#xff0c;以及各种可重用的模块。这些组件作为小的构建模块&#xff0c;被组合起来代表某种商业流程。自动化测试…

248: vue+openlayers 以静态图片作为底图,并在上面绘制矢量多边形

第248个 点击查看专栏目录 本示例是演示如何在vue+openlayers项目中以静态图片作为底图,并在上面绘制矢量多边形。这里主要通过pixels的坐标作为投射,将静态图片作为底图,然后通过正常的方式在地图上显示多边形。注意的是左下角为[0,0]。 直接复制下面的 vue+openlayers源代…

leetcode算法之位运算

目录 1.判断字符是否唯一2.丢失的数字3.两整数之和4.只出现一次的数字II5.消失的两个数字6.位1的个数7.比特位计数8.汉明距离 1.判断字符是否唯一 判断字符是否唯一 class Solution { public:bool isUnique(string astr) {//利用鸽巢原理做优化if(astr.size()>26) return…

09-流媒体-FLV解复用

整体方案&#xff1a; 采集端&#xff1a;摄像头采集&#xff08;YUV&#xff09;->编码&#xff08;YUV转H264&#xff09;->写封装&#xff08;&#xff28;264转FLV&#xff09;->RTMP推流 客户端&#xff1a;RTMP拉流->解封装&#xff08;FLV转H264&#xff09…

ts视频文件转为mp4(FFmpeg)

有些视频资源下载下来之后发现是.ts的文件&#xff0c;除了用下载它时用的工具或是浏览器才能看&#xff0c;那有没有将ts文件转换成更加通用视频格式的方法。 几乎万能的音视频工具--ffmpeg登场 安装和环境配置可看这篇博客&#xff1a;FFmpeg指令行打开usb摄像头&#xff0…

RabbitMQ-高级篇-黑马程序员

代码&#xff1a; 链接&#xff1a; https://pan.baidu.com/s/1nQBIgB_SbzoKu_XMWZ3JoA?pwdaeoe 提取码&#xff1a;aeoe 在昨天的练习作业中&#xff0c;我们改造了余额支付功能&#xff0c;在支付成功后利用RabbitMQ通知交易服务&#xff0c;更新业务订单状态为已支付。 但…

python+pytest接口自动化测试之接口测试基础

一、接口测试的基本信息 1、常用的两种接口&#xff1a;webservice接口和http api接口   webService接口是走soap协议通过http传输&#xff0c;请求报文和返回报文都是xml格式的&#xff0c;可以用soupui、jmeter等工具进行测试。   http api接口是走http协议&#xff0c;…

STM32在FreeRTOS下的us延时

STM32在FreeRTOS下的us延时 前言 freeRTOS下跑SPI时需要微秒级别的延时&#xff0c;但是freeRTOS只提供了毫秒级的&#xff0c;记录一下实现us延时的方法。 前期分析 最简单的方式就是开个定时器或者干脆直接计算一下用nop做都可以实现us延时&#xff0c;但是显然还是使用滴…

各品牌PLC元件在modbus内区域

1台达&#xff1a; 输出在0区&#xff0c; 040961是在 0区 0xA000~0xA0FF 【Y0~Y377】 输入在1区&#xff0c;124577是在 1区 0x6000~0x60FF 【X0~X377】 M寄存器0区&#xff0c;0000001是 0区&#xff0c;0x000~0x1FFF 【M0~M8191】 D寄存器4区&#xff0c;400000…

vue2 tinymce富文本插件

一、介绍 TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。同类程序有&#xff1a;UEditor、Kindeditor、Simditor、CKEditor、wangEditor、Suneditor、froala等等。 TinyMCE的优势&#xff1a; 开源可商用&#xff0c;基于LGPL2.1插件丰富&#xff0c;自带插件基…

OpenAI的Whisper蒸馏:速度提升6倍的Distil-Whisper

1 Distil-Whisper诞生 Whisper 是 OpenAI 研发并开源的一个自动语音识别&#xff08;ASR&#xff0c;Automatic Speech Recognition&#xff09;模型&#xff0c;他们通过从网络上收集了 68 万小时的多语言&#xff08;98 种语言&#xff09;和多任务&#xff08;multitask&am…

【Hello Go】Go语言流程控制

Go语言流程控制 选择结构if语句switch语句 循环结构for循环range 跳转语句 Go语言支持最基本的三种程序结构 顺序结构选择结构循环结构 选择结构 if语句 Go语言中的if语句是没有括号的 代码演示如下 var a int 3 // 因为a 3 所以说只会输出3if a 3 {fmt.Println("…

B站批量取消关注

找到关注页面&#xff1a; 右键检查或者按F12进入开发者界面 然后选console&#xff0c;在页面下面输入下面jQuery代码&#xff0c;然后按回车。复制粘贴两次这一页的博主就能全部取消大概20个 然后刷新页面&#xff0c;接着粘贴两边代码&#xff0c;循环如此即可。 $(".…

【新闻稿】Solv 与 zCloak 联合开发跨境贸易场景下可编程数字凭证项目,获得新加坡、加纳两国央行支持...

关于昨天 Solv 携手 zCloak 与新加坡和加纳两个央行合作的 Project DESFT&#xff0c;很多朋友都发来恭喜和祝福&#xff0c;并希望了解详情。这个事我们秘密努力了半年多&#xff0c;终于有一个阶段性的成果。这里我转载中文版官宣新闻稿&#xff0c;欢迎大家关注。等我忙过这…

Javaweb之Vue的概述

2.1 Vue概述 通过我们学习的htmlcssjs已经能够开发美观的页面了&#xff0c;但是开发的效率还有待提高&#xff0c;那么如何提高呢&#xff1f;我们先来分析下页面的组成。一个完整的html页面包括了视图和数据&#xff0c;数据是通过请求 从后台获取的&#xff0c;那么意味着我…

Android Proguard混淆

关于作者&#xff1a;CSDN内容合伙人、技术专家&#xff0c; 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 &#xff0c;擅长java后端、移动开发、人工智能等&#xff0c;希望大家多多支持。 目录 一、导读二、概览三、语法规则3.1 输入/输出选项3.2 保留选项3.3 缩…

系统时间和JVM的Date时间不一致问题解决

通过Java得到的时间与操作系统时间不一致&#xff0c;如何修改Java虚拟机时间&#xff1f; 造成这种问题的原因可能是&#xff1a;你的操作系统时区跟你JVM的时区不一致。 你的操作系统应该是中国的时区吧&#xff0c;而JVM的时区不一定是中国时区&#xff0c;你在应用服务器…

高教社杯数模竞赛特辑论文篇-2023年C题:基于历史数据的蔬菜类商品定价与补货决策模型(附获奖论文及R语言和Python代码实现)(中)

目录 六、 问题三模型建立与求解 6.1 问题三求解思路 6.2 问题三模型建立 6.2.1 模型假定和预处理