uni-app 从vue3项目创建到Pinia管理数据全局使用 持久化存储数据 详细教程

embedded/2024/11/13 15:02:42/

一、创建uni-app项目

 

1. 安装HBuilder X,下载地址:https://www.dcloud.io/hbuilderx.html

2. 打开HBuilder X,点击左上角的“文件”->“新建”->“项目”,选择“uni-app”项目模板,填写项目名称和项目路径,点击“创建”按钮。

 

二、安装Pinia

 

1. 在项目根目录下打开命令行工具,执行以下命令安装Pinia:

 

```bash

npm install pinia@next

```

 

三、创建Pinia store

 

1. 在项目根目录下创建一个名为`store`的文件夹,然后在`store`文件夹下创建一个名为`index.js`的文件。

 

2. 编辑`store/index.js`文件,添加以下代码:

 

```javascript

import { createPinia } from 'pinia';

 

export const setupStore = () => {

  return createPinia();

};

```

 

四、在main.js中使用Pinia

 

1. 编辑`main.js`文件,引入刚刚创建的`store`,并将其添加到Vue实例中:

 

```javascript

import { createApp } from 'vue';

import App from './App.vue';

import { setupStore } from './store';

 

const app = createApp(App);

 

// 使用Pinia

app.use(setupStore());

 

app.mount('#app');

```

 

五、创建数据管理模块

 

1. 在`store`文件夹下创建一个名为`modules`的文件夹。

 

2. 在`modules`文件夹下创建一个名为`user.js`的文件,用于管理用户数据。

 

3. 编辑`modules/user.js`文件,添加以下代码:

 

```javascript

import { defineStore } from 'pinia';

 

export const useUserStore = defineStore({

  id: 'user',

  state: () => ({

    name: '',

    age: 0,

  }),

  getters: {

    fullName() {

      return this.name;

    },

  },

  actions: {

    setName(name) {

      this.name = name;

    },

    setAge(age) {

      this.age = age;

    },

  },

});

```

 

六、在页面中使用Pinia管理数据

 

1. 编辑需要使用Pinia管理数据的页面,例如`pages/index/index.vue`。

 

2. 在`<script>`标签中引入`userStore`:

 

```javascript

import { useUserStore } from '@/store/modules/user';

```

 

3. 在`setup()`函数中使用`userStore`:

 

```javascript

export default {

  setup() {

    const userStore = useUserStore();

 

    return {

      userStore,

    };

  },

};

```

 

4. 在模板中使用`userStore`管理的数据和方法:

 

```html

<template>

  <view>

    <text>姓名:{{ userStore.fullName }}</text>

    <text>年龄:{{ userStore.age }}</text>

    <button @click="userStore.setName('张三')">设置姓名</button>

    <button @click="userStore.setAge(18)">设置年龄</button>

  </view>

</template>

```

 

七、持久化存储数据

 

1. 安装`pinia-plugin-persistedstate`插件:

 

```bash

npm install pinia-plugin-persistedstate

```

 

2. 在`store/index.js`文件中引入并使用该插件:

 

```javascript

import { createPinia } from 'pinia';

import { createPersistedState } from 'pinia-plugin-persistedstate';

 

export const setupStore = () => {

  const store = createPinia();

  store.use(createPersistedState());

  return store;

};

```

 

至此,你已经成功创建了一个uni-app项目,并使用Pinia进行全局数据管理,同时实现了数据的持久化存储。

 


http://www.ppmy.cn/embedded/33023.html

相关文章

区块链 | IPFS:IPNS(实操版)

&#x1f98a;原文&#xff1a;Publishing IPNS names Publishing IPNS names with Kubo Step1&#xff1a; 启动你的 IPFS 守护进程&#xff08;如果尚未运行&#xff09;&#xff1a; $ ipfs daemon说明&#xff1a;以 $ 开头的是命令&#xff0c;以 > 开头的是执行结果…

Wpf DataGrid ComboBox 列

遇到的问题 最开始找到的例子要写 Convert, 感觉和 Vue-Elment 的差别比较大后面找到类似与 Vue-Element UI 的写法&#xff0c;开始时数值不更新 关键代码 <DataGridTemplateColumn Header"Digit" Width"100"><DataGridTemplateColumn.CellTem…

《QT实用小工具·五十四》果冻弹出效果的动画按钮

1、概述 源码放在文章末尾 该项目实现动画按钮&#xff0c;鼠标放在按钮上可以弹性拉出的三个按钮&#xff0c;使用贝塞尔曲线实现&#xff0c;项目demo显示如下所示&#xff1a; 项目部分代码如下所示&#xff1a; #ifndef WATERCIRCLEBUTTON_H #define WATERCIRCLEBUTTON…

MLP一夜被干掉?革命性新网络KAN【第一篇-base】

要看完哦&#xff0c;文末彩蛋&#xff01; 用“极市平台”的导读语来说&#xff1a;新网络KAN基于柯尔莫哥洛夫-阿诺德定理&#xff0c;带着更少的参数、更强的性能、更好的可解释性来了&#xff0c;深度学习架构革新进入新时代&#xff01; 目录 导语 ​编辑 KAN的基础理论…

公考学习平台|基于SprinBoot+vue的公考学习平台(源码+数据库+文档)

公考学习平台目录 目录 基于SprinBootvue的公考学习平台 一、前言 二、系统设计 三、系统功能设计 5.1用户信息管理 5.2 视频信息管理 5.3公告信息管理 5.1论坛信息管理 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&…

系统如何做好数据质量管理

对数据从计划、获取、存储、共享、维护、应用、消亡生命周期的每个阶段里可能引发的各类数据质量问题&#xff0c;进行识别、监控、预警、处理等一系列管理活动&#xff0c;并通过改善和提高管理水平使得数据质量获 得进一步提高。 2术语和定义 2.1数据质量 data quality 2.2…

QSqlDatabase的数据库路径或名称问题

在Qt的数据库编程中&#xff0c;先是设置数据库的类型&#xff0c;然后是设置数据库文件的路径&#xff0c;或者数据库名称。若有数据库的用户名、密码&#xff0c;则分别调用setUserName(“”)、setPassword(“”)来设置用户名和密码&#xff1b;若没有&#xff0c;则省略用户…

Redis与Mysql双写一致性如何保证

前言 之前我就在面试被问到Redis与MySQL双写一致性如何保证&#xff1f;当时没答出来,回去做了复盘。下面这些引用了网络上给出的方案&#xff0c;加上了我自己的理解&#xff0c;希望对大家有帮助。 这道题其实就是在问缓存和数据库在双写场景下&#xff0c;一致性是如何保证…