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

合集 - UniApp(23)

1.【UniApp】-uni-app概述2023-12-072.【UniApp】-uni-app全局样式和局部样式2023-12-073.【UniApp】-uni-app-全局数据和局部数据2023-12-084.【UniApp】-uni-app-内置组件2023-12-095.【UniApp】-uni-app-扩展组件2023-12-096.【UniApp】-uni-app-修改组件主题和样式2023-12-107.【UniApp】-uni-app-OptionAPI应用生命周期和页面生命周期2023-12-108.【UniApp】-uni-app-CompositionAPI应用生命周期和页面生命周期2023-12-119.【UniApp】-uni-app-路由2023-12-1610.【UniApp】-uni-app-传递数据2023-12-1611.【UniApp】-uni-app-CompositionAPI传递数据2023-12-1712.【UniApp】-uni-app-数据传递补充2023-12-1713.【UniApp】-uni-app-数据缓存2023-12-17

14.【UniApp】-uni-app-pinia存储数据2023-12-19

15.【UniApp】-uni-app-网络请求2023-12-2016.【UniApp】-uni-app-自定义组件2023-12-2117.【UniApp】-uni-app-项目实战页面布局(苹果计算器)2023-12-2418.【UniApp】-uni-app-处理项目输入数据(苹果计算器)2023-12-2419.【UniApp】-uni-app-动态计算字体大小(苹果计算器)2023-12-2520.【UniApp】-uni-app-项目计算功能(苹果计算器)2023-12-2621.【UniApp】-uni-app-打包成网页2023-12-2822.【UniApp】-uni-app-打包成小程序2023-12-2823.『UniApp』uni-app-打包成App2023-12-30

收起

前言

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

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

步入正题

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

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

多了一个 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 中的方法：

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

• 如上代码的含义首先在 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

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

• 前言
• 步入正题
• Pinia
•     配置 Pinia
•     使用 Pinia
• End

__EOF__