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


相关文章
|
4天前
|
传感器 人工智能 监控
Uni-app智慧工地数据大屏可视化监管平台源码带APP
智慧工地的核心是数字化,它通过传感器、监控设备、智能终端等技术手段,实现对工地各个环节的实时数据采集和传输,如环境温度、湿度、噪音等数据信息,将数据汇集到云端进行处理和分析,生成各种报表、图表和预警信息,帮助管理人员了解工地的实时状况,及时做出决策和调整,
54 0
|
4天前
|
监控 安全 数据可视化
java基于微服务的智慧工地管理云平台SaaS源码 数据大屏端 APP移动端
围绕施工现场人、机、料、法、环、各个环节,“智慧工地”将传统建筑施工与大数据物联网无缝结合集成多个智慧应用子系统,施工数据云端整合分析,提供专业、先进、安全的智慧工地解决方案。
34 1
|
4天前
|
存储 JavaScript 小程序
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据是什么?
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据是什么?
16 0
|
4天前
|
监控 安全 数据可视化
【教程】为什么要为 App 应用加固 ?如何为 App 应用加固 ?
【教程】为什么要为 App 应用加固 ?如何为 App 应用加固 ?
|
4天前
|
开发者 iOS开发
UniApp打包教程:使用HBuilder X和AppUploader完成原生App云打包和上架指南“
UniApp打包教程:使用HBuilder X和AppUploader完成原生App云打包和上架指南“
89 3
|
3天前
|
Android开发 移动开发 小程序
binder机制原理面试,安卓app开发教程
binder机制原理面试,安卓app开发教程
binder机制原理面试,安卓app开发教程
|
4天前
|
搜索推荐 前端开发 JavaScript
【专栏】从网页轻松转换为应用越来越便捷
【4月更文挑战第27天】本文介绍了将网页转换为移动应用的在线生成App过程,包括原理(封装网页内容,添加移动特性)、优势(便捷高效,节省成本,快速上线)以及具体步骤(选择工具,准备内容,配置选项,生成测试,发布推广)。同时,注意版权、兼容性和用户体验问题。通过案例分析和实践经验分享,帮助读者深入了解如何通过在线工具实现App梦想,强调了网页优化、用户界面设计和个性化定制的重要性。
|
4天前
|
监控 数据可视化 安全
智慧工地SaaS可视化平台源码,PC端+APP端,支持二开,项目使用,微服务+Java++vue+mysql
环境实时数据、动态监测报警,实时监控施工环境状态,有针对性地预防施工过程中的环境污染问题,打造文明生态施工,创造绿色的生态环境。
19 0
智慧工地SaaS可视化平台源码,PC端+APP端,支持二开,项目使用,微服务+Java++vue+mysql
|
4天前
|
JSON API 数据格式
如何获得淘宝/天猫app商品详情原数据 API 返回值说明
淘宝和天猫的API返回值通常会包含商品的详细信息。这些信息可能包括但不限于商品ID、商品标题、商品描述、价格、优惠信息、库存、发货地、物流方式等。具体的返回字段可能会随着API版本的更新而有所变化,因此建议参考淘宝/天猫开放平台官方提供的API文档来获取最准确的信息。
|
4天前
|
iOS开发 开发者
【教程】uni-app iOS 打包解决 profile 文件与私钥证书不匹配问题
【教程】uni-app iOS 打包解决 profile 文件与私钥证书不匹配问题