【UniApp】-uni-app-pinia存储数据

这篇具有很好参考价值的文章主要介绍了【UniApp】-uni-app-pinia存储数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

【UniApp】-uni-app-pinia存储数据

前言

  • 经过上个章节的介绍,大家可以了解到 uni-app-数据缓存 的基本使用方法
  • 那本章节来给大家介绍一下 uni-app-pinia存储数据 的基本使用方法
  • 经过我这么多篇章的介绍,我发现大家环境比较耗时,所以在今后的文章中,我会尽量减少环境的搭建
  • 如果某一篇的文章环境确实是不一样的,我会在文章中说明,然后编写对应的搭建过程

本文的由来呢,就是因为在 Vue2 中与 Vue3 中都可以使用 Vuex 来进行数据的存储, 但是在 Vue3 出现了 Pinia,所以我就想着在 uni-app 中使用 Pinia 来进行数据的存储。

步入正题

首先来给大家看看官方文档吧,在文档中找到, uni-app -> 教程 -> vue语法,先来看 Vue2:

【UniApp】-uni-app-pinia存储数据

可以从图中看到,在 Vue2 当中的存储方式只有 Vuex,然后再来看看 Vue3:

【UniApp】-uni-app-pinia存储数据

多了一个 Pinia,好,知道了这些内容之后我就来开始写代码编写示例,带大家过一遍。

  • 使用 UniApp 创建的项目是内置了 Pinia,Vue2 项目暂不支持

根据官方文档的介绍,首先我们需要搭建一个对应的目录结构:

├── pages
├── static
└── stores
    └── counter.js
├── App.vue
├── main.js
├── manifest.json
├── pages.json
└── uni.scss

就是创建一个 stores 文件夹,在该文件夹下创建对应模块的 js 文件。

  • 创建一个默认模板项目,基于 Vue3
  • 创建好项目之后,首先更改 main.js,导入 pinia,注册 pinia,导出 pinia

Pinia

配置 Pinia

导入 Pinia:

import * as Pinia from 'pinia';

注册 Pinia:

app.use(Pinia.createPinia());

导出 Pinia:

return {
    app,
    // 此处必须将 Pinia 返回
    Pinia,
}

使用 Pinia

首先在 stores 文件夹下,创建 counter.js,内容如下:

import {
	defineStore
} from 'pinia';

export const useCounterStore = defineStore('counter', {
	state: () => {
		return {
			count: 0
		};
	},
	// 也可以这样定义
	// state: () => ({ count: 0 })
	actions: {
		increment() {
			this.count++;
		},
		decrement() {
			this.count--;
		},
	},
});

如上代码通过 defineStore 定义了一个名为 counter 的 store,然后通过 state 定义了一个 count 的状态,然后通过 actions 定义了两个方法,分别是 increment 和 decrement,分别用来增加和减少 count 的值。

再接着在首页页面,添加两个按钮分别是增加与减少调用 store 中的方法:

<template>
	<view>
		{{ count }}
		<button type="primary" @click="myIncrement">增加</button>
		<button type="primary" @click="myDecrement">减少</button>
	</view>
</template>

<script setup>
	import {
		useCounterStore
	} from '@/stores/counter.js'
	import {
		storeToRefs
	} from 'pinia'

	const counterStore = useCounterStore()

	const {
		count
	} = storeToRefs(counterStore)

	function myIncrement() {
		counterStore.increment()
	}

	function myDecrement() {
		counterStore.decrement()
	}
</script>

代码我写完了,先来看运行的效果,然后我在一一解释代码:

【UniApp】-uni-app-pinia存储数据

  • 如上代码的含义首先在 script setup 中导入了 useCounterStore,然后通过 useCounterStore 创建了一个 counterStore
  • 然后通过 storeToRefs 将 counterStore 中的 count 转换成了 ref,然后在模板中通过 {{ count }} 将 count 的值显示出来
  • 然后通过 @click 调用 myIncrement 和 myDecrement 方法,然后在 myIncrement 和 myDecrement 方法中调用了 counterStore 中的 increment 和 decrement 方法
  • 然后通过 counterStore.increment() 和 counterStore.decrement() 调用了 store 中的方法

好,到这已经结束了,是不是很简单,我就不多说了,大家可以自己去尝试一下。

这个存储的是全局的数据,大家还可以新建一个 one 页面,配置一下 tabBar 在 one 页面中从 store 中获取 count 的值, 显示一下即可,在首页操作之后 one 页面的 count 的值也会发生变化。

End

  • 如果你有任何问题或建议,欢迎在下方留言,我会尽快回复
  • 如果你觉得本文对你有帮助,欢迎点赞、收藏,你的支持是我写作的最大动力

【UniApp】-uni-app-pinia存储数据文章来源地址https://www.toymoban.com/news/detail-760461.html

到了这里,关于【UniApp】-uni-app-pinia存储数据的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【uniapp】小程序开发:2 安装uni-ui组件库、使用pinia状态管理、自定义http请求

    1、安装 2、配置组件自动导入 使用 npm 安装好 uni-ui 之后,需要配置 easycom 规则,让 npm 安装的组件支持 easycom 打开项目根目录下的 pages.json 并添加 easycom 节点: 3、安装插件,实现uni-ui组件的类型提示 安装完成后,在 tsconfig.json 中增加配置项 4、测试使用 随便复制一个组件在

    2024年02月08日
    浏览(58)
  • uni-app+vue3+ts+pinia报错【“hasInjectionContext“ is not exported by “node_modules/.store/pinia@2.1.7/n】

    【完整报错】\\\"hasInjectionContext\\\" is not exported by \\\"node_modules/.store/pinia@2.1.7/node_modules/vue-demi/lib/index.mjs\\\", imported by \\\"node_modules/.store/pinia@2.1.7/node_modules/pinia/dist/pinia.mjs\\\". 【报错原因】版本不匹配 查看package.json下pinia和vue版本 【版本参考界面】https://github.com/vuejs/pinia/blob/v2/packages/pini

    2024年04月11日
    浏览(44)
  • uniapp引用pinia,app端白屏报错:reportJSException >>>> exception function:createInstanceContext...

    一、场景 uniapp引用pinia,app端进入应用白屏。 reportJSException exception function:createInstanceContext, exception:white screen cause create instanceContext failed,check js stack - /at useStore (app-service.js:2309:15) 二、分析 问题出现的原因就是store实例环境还没加载。 代码层面问题出现的位置在store.js文件里,

    2024年02月13日
    浏览(36)
  • uni-app本地存储

    大家好,今天和大家分享一下uni-app中的本地存储,其中分为同步和异步,有些朋友可能也在这两个概念中迷惑过,下面我们就来讲讲这个本地存储。 1.uni.setStorage(OBJECT) 将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个异步接口。 OBJECT参数 参

    2024年02月05日
    浏览(46)
  • 使用命令行方式搭建uni-app + Vue3 + Typescript + Pinia + Vite + Tailwind CSS + uv-ui开发脚手架

    项目代码以上传至码云,项目地址:https://gitee.com/breezefaith/uniapp-vue3-ts-scaffold 近日心血来潮想做一个开源项目,目标是做一款可以适配多端、功能完备的模板工程,包含后台管理系统和前台系统,开发者基于此项目进行裁剪和扩展来完成自己的功能开发。但前台系统花样繁多

    2024年01月20日
    浏览(60)
  • 【pinia持久化存储】使用pinia和pinia-plugin-persistedstate依赖进行数据的持久化存储

    使用pinia和pinia-plugin-persistedstate依赖进行数据的持久化存储。 存储方式 : localStorage sessionStorage pinia-plugin-persistedstate 中文官网 pinia 中文官网 安装和使用 pinia ,请参考使用pinia文章。 安装 pinia-plugin-persistedstate : 使用前先将 pinia-plugin-persistedstate添加到pinia实例上。 在添加的时

    2023年04月17日
    浏览(44)
  • 『UniApp』uni-app-打包成App

    大家好,我是 BNTang, 在上一节文章中,我给大家详细的介绍了如何将我开发好的项目打包为微信小程序并且发布到微信小程序商店 趁热打铁,在来一篇文章,给大家详细的介绍如何将项目打包成APP。 打包 App 也是一样的,首先需要配置关于 App 应用的基础信息,打开 manifest

    2024年02月04日
    浏览(99)
  • 【UniApp】-uni-app-网络请求

    经过上个章节的介绍,大家可以了解到 uni-app-pinia存储数据的基本使用方法 那本章节来给大家介绍一下 uni-app-网络请求 的基本使用方法 首先我们打开官方文档,我先带着大家看一下官方文档的介绍:https://uniapp.dcloud.net.cn/api/request/request.html 从官方文档中我们可以看到,可以

    2024年02月04日
    浏览(50)
  • 【UniApp】-uni-app-打包成网页

    经过上一篇文章的介绍,已经将这个计算器的计算功能实现了,接下来就是我们项目当中的一个发包上线阶段,我模拟一下,目的就是为了给大家介绍一下,uni-app是如何打包成网页的。 除了可以打包成网页,uni-app还可以打包成小程序、App、H5、快应用等等,后面在单独开文

    2024年02月04日
    浏览(69)
  • Uniapp uni-app学习与快速上手

    个人开源uni-app开源项目地址:准备中 在线展示项目地址:准备中 什么是uni-app uni,读 you ni ,是统一的意思。 Dcloud即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位,致力于推进HTML5发展构建,HTML5生态。 2012年,DCloud开始研发小程序技术,优化webvie

    2024年02月09日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包