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

简介: 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进行全局数据管理,同时实现了数据的持久化存储。


相关文章
|
1月前
|
XML Java 数据库
安卓项目:app注册/登录界面设计
本文介绍了如何设计一个Android应用的注册/登录界面,包括布局文件的创建、登录和注册逻辑的实现,以及运行效果的展示。
139 0
安卓项目:app注册/登录界面设计
|
3月前
|
Java 应用服务中间件 Windows
【应用服务 App Service】App Service 中部署Java项目,查看Tomcat配置及上传自定义版本
【应用服务 App Service】App Service 中部署Java项目,查看Tomcat配置及上传自定义版本
|
30天前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
200 3
|
1月前
|
JSON API 网络安全
App数据的爬取
App数据的爬取
|
1月前
|
缓存 开发框架 移动开发
uni-app:下载使用uni&创建项目&和小程序链接&数据缓存&小程序打包 (一)
uni-app 是一个跨平台的开发框架,它允许开发者使用 Vue.js 来构建应用程序,并能够同时发布到多个平台,如微信小程序、支付宝小程序、H5、App(通过DCloud的打包服务)等。uni-app 的目标是通过统一的代码库,简化多平台开发过程,提高开发效率。 在这一部分中,我们将逐步介绍如何下载和使用uni-app、创建一个新的项目、如何将项目链接到小程序,以及实现数据缓存的基本方法。
|
3月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
104 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
3月前
|
存储 SQL JSON
【Azure Logic App】微软云逻辑应用连接到数据库,执行存储过程并转换执行结果为JSON数据
【Azure Logic App】微软云逻辑应用连接到数据库,执行存储过程并转换执行结果为JSON数据
【Azure Logic App】微软云逻辑应用连接到数据库,执行存储过程并转换执行结果为JSON数据
|
3月前
|
缓存
【Azure Function】Function App代码中使用Managed Identity认证获取Blob数据时遇见400报错
【Azure Function】Function App代码中使用Managed Identity认证获取Blob数据时遇见400报错
【Azure Function】Function App代码中使用Managed Identity认证获取Blob数据时遇见400报错
|
3月前
|
开发框架 .NET Docker
【Azure 应用服务】App Service .NET Core项目在Program.cs中自定义添加的logger.LogInformation,部署到App Service上后日志不显示Log Stream中的问题
【Azure 应用服务】App Service .NET Core项目在Program.cs中自定义添加的logger.LogInformation,部署到App Service上后日志不显示Log Stream中的问题
|
3月前
|
JavaScript Windows
【Azure 应用服务】用App Service部署运行 Vue.js 编写的项目,应该怎么部署运行呢?
【Azure 应用服务】用App Service部署运行 Vue.js 编写的项目,应该怎么部署运行呢?