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

一、创建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.mzph.cn/pingmian/6579.shtml

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

相关文章

从 Word 文档中提取所有的有效 JSON 对象(包含跨段落)

文章目录 一、概述二、代码 一、概述 从 word 中提取所有有效 json &#xff08;包含跨段落的 json&#xff09;。 二、代码 """ 从 Word 文档中提取所有的 JSON 对象 """from docx import Document import jsondef extract_json_from_docx(d…

springmvc下

第二类初始化操作 multipartResolver应用 localeResolver应用 themeResolver应用 handlerMapping应用 handlerAdapter应用 handlerExceptionReslver requestToViewNameTranslator应用 viewResolver应用 flashMapManager应用 dispatcherServlet逻辑处理 processRequest处理web请…

目标跟踪—卡尔曼滤波

目标跟踪—卡尔曼滤波 卡尔曼滤波引入 滤波是将信号中特定波段频率滤除的操作&#xff0c;是抑制和防止干扰的一项重要措施。是根据观察某一随机过程的结果&#xff0c;对另一与之有关的随机过程进行估计的概率理论与方法。 历史上最早考虑的是维纳滤波&#xff0c;后来R.E.卡…

相差8小时:时区设置导致docker中的openGauss时间问题

文章目录 &#xff08;一&#xff09;问题&#xff08;二&#xff09;解决&#xff08;2.1&#xff09;确认服务器时间&#xff08;2.2&#xff09;确认和修改docker时间&#xff08;2.2.1&#xff09;失败的尝试&#xff08;2.2.2&#xff09;成功的尝试 &#xff08;2.2&…

OpenCV特征检测

1. 特征检测的基本概念 特征检测是计算机视觉和图像处理中的一个概念。它指的是使用计算机提取图像信息&#xff0c;决定每个图像的点是否属于一个图像特征。特征检测的结果是把图像上的点 分为不同的子集&#xff0c;这些子集往往属于孤立的点、连续的曲线或者连续的区域。 …

【C语言】分支和循环(上)

【C语言】分支和循环&#xff08;上&#xff09; 1、if语句1.2 else1.3分支中包含多条语句1.4嵌套if1.5悬空else问题 2、关系操作符3、条件操作符4、逻辑操作符&#xff1a;与、或、非&#xff08;取反&#xff09;&#xff08;&&&#xff0c;||&#xff0c;&#xff0…

小猪APP分发平台 – 掌握移动应用的推广新途径

在移动互联网高速发展的背景下小猪APP分发平台 – 掌握移动应用的推广新途径&#xff0c;app分发已成为开发者和企业关注的重点。小猪APP分发平台作为行业内的新星小猪APP分发平台 – 掌握移动应用的推广新途径&#xff0c;提供了一个创新且高效的方式帮助开发者推广他们的应用…

attr 与prop 的区别

在前端开发中&#xff0c;attr 和 prop 是两个常用的方法&#xff0c;用于操作 HTML 元素的属性和属性值。 它们之间的区别主要在于针对不同类型的属性操作。 attr&#xff08;&#xff09;&#xff1a; attr() 是 jQuery 中用来获取或设置 HTML 元素的属性的方法。它可以用于获…

ZOC8 for Mac v8.08.1激活版:卓越性能的SSH客户端

在远程连接和管理的世界中&#xff0c;ZOC8 for Mac以其卓越的性能和丰富的功能&#xff0c;成为了众多专业人士的首选SSH客户端。它支持SSH1、SSH2、Telnet、Rlogin、Serial等多种协议&#xff0c;让您轻松连接到远程服务器。ZOC8拥有简洁直观的界面和强大的功能设置&#xff…

SQL 基础 | JOIN 操作介绍

在SQL中&#xff0c;JOIN是一种强大的功能&#xff0c;用于将两个或多个表中的行结合起来&#xff0c;基于相关的列之间的关系。 JOIN操作通常用在SELECT语句中&#xff0c;以便从多个表中检索数据。 以下是几种基本的JOIN类型以及它们的用法&#xff1a; INNER JOIN&#xff1…

STM32 串口IDLE接收空闲中断+DMA

参考 http://t.csdnimg.cn/fAV38 1.基础知识 STM32 IDLE 接收空闲中断 功能&#xff1a; 在使用串口接受字符串时&#xff0c;可以使用空闲中断&#xff08;IDLEIE置1&#xff0c;即可使能空闲中断&#xff09;&#xff0c;这样在接收完一个字符串&#xff0c;进入空闲状态时&…

力扣39(组合总和)

解题思路&#xff1a;没有什么特殊的&#xff0c;按照递归三部曲确定返回值与参数&#xff0c;确定终止条件&#xff0c;确定单层循环的逻辑就可以解出来 代码实现&#xff1a; class Solution { public: vector<vector<int>>result; vector<int>path; vo…

(三)Appdesigner-界面转换及数据导入和保存

提示&#xff1a;文章为系列文章&#xff0c;可以在对应学习专栏里面进行学习。对应资源已上传 目录 前言 一、Appdesigner是什么&#xff1f; 二、界面切换 三、数据导入及保存 &#xff08;一&#xff09;数据导入 &#xff08;二&#xff09;数据保存 总结 前言 Appd…

ubuntu搭建kms服务器

1.下载kms开源包(如果提示找不到wget命令的话:apt install wget): wget https://github.com/Wind4/vlmcsd/releases/download/svn1111/binaries.tar.gz2.解压: tar -xzvf binaries.tar.gz接着cd 进入 Linux/intel/static/ 文件夹下: 3.选择对应的文件&#xff0c;这里我们选…

C++:继承-继承权限

在C中&#xff0c;类的权限分为公有、私有和保护三种。这些权限控制了类的成员&#xff08;数据成员和成员函数&#xff09;对外部代码的可见性和访问性。 公有&#xff08;public&#xff09;权限&#xff1a; 在公有权限下声明的成员可以被类的外部代码直接访问&#xff1b;公…

第十篇:深入文件夹:Python中的文件管理和自动化技术

深入文件夹&#xff1a;Python中的文件管理和自动化技术 1 文件系统基础操作 在今天的技术博客中&#xff0c;我们将深入探讨Python中的文件系统基础操作。文件系统对于任何操作系统都是不可或缺的组成部分&#xff0c;它管理着数据的存储、检索以及维护。Python通过其标准库中…

【Linux 进程】 自定义shell

目录 关于shell 1.打印提示符&&获取用户命令字符​编辑 2.分割字符串 3.检查是否为内建命令 cd命令 export命令 echo命令 1.输出最后一个执行的命令的状态退出码&#xff08;返回码&#xff09; 2.输出指定环境变量 4.执行外部命令 关于shell Shell 是计算机操…

QGraphicsView实现简易地图8『缓存视口周边瓦片』

前文链接&#xff1a;QGraphicsView实现简易地图7『异步加载-多瓦片-无底图』 前7篇的地图加载&#xff0c;都采用最少瓦片数量的算法&#xff0c;即用最少数量的瓦片覆盖视口&#xff0c;以获得最快的加载速度。但是这样会带来一个问题&#xff0c;那就是每当移动地图时&#…

代理ip的用途及是否可以降低延迟

代理IP具有广泛的应用领域&#xff0c;包括但不限于以下方面&#xff1a; 1. 匿名浏览和隐私保护 通过使用代理IP&#xff0c;您可以隐藏自己的真实IP地址&#xff0c;从而在网络上保持匿名。这对于维护个人隐私和保护个人身份非常重要。 2. 访问限制网站 代理IP可以绕过地理位…

免费开源,无需 GPU,本地化部署大语言模型的对话系统

免费开源&#xff0c;无需 GPU&#xff0c;本地化部署大语言模型的对话系统 分类 编程技术 项目名: FreeAskInternet -- 本地化部署大语言模型的对话系统 Github 开源地址&#xff1a; https://github.com/nashsu/FreeAskInternet FreeAskInternet 是一个免费开源的工具&am…