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


相关文章
|
5月前
《仿盒马》app开发技术分享-- 确认订单页(数据展示)(29)
上一节我们实现了地址的添加,那么有了地址之后我们接下来的重点就可以放到订单生成上了,我们在购物车页面,点击结算会跳转到一个 订单确认页面,在这个页面我们需要有地址选择、加购列表展示、价格计算、优惠计算、商品数量展示等信息。
171 3
|
2月前
|
存储 前端开发 API
可配置化App启动弹窗系统:实现后台动态管理与热更新引导-蜻蜓Q系统laravel+vue3-优雅草卓伊凡
可配置化App启动弹窗系统:实现后台动态管理与热更新引导-蜻蜓Q系统laravel+vue3-优雅草卓伊凡
299 5
可配置化App启动弹窗系统:实现后台动态管理与热更新引导-蜻蜓Q系统laravel+vue3-优雅草卓伊凡
|
6月前
|
人工智能 文件存储 数据中心
Ollama部署本地大模型并通过Infortress APP远程访问保姆级教程
本文介绍如何快速上手本地大模型部署工具Ollama及AI远程访问工具Infortress。通过Ollama,开发者可轻松部署如Llama、Deepseek等主流开源模型,仅需几行命令即可完成安装与运行。结合Infortress,用户能实现对本地大模型的远程访问,支持多设备无缝对接,同时提供便捷的模型切换与知识库管理功能。Infortress更兼具NAS软件特性,成为个人AI数据中心的理想选择。
|
1月前
|
人工智能 小程序 搜索推荐
【一步步开发AI运动APP】十二、自定义扩展新运动项目2
本文介绍如何基于uni-app运动识别插件实现“双手并举”自定义扩展运动,涵盖动作拆解、姿态检测规则构建及运动分析器代码实现,助力开发者打造个性化AI运动APP。
|
3月前
|
缓存 小程序 iOS开发
基于uni-app+vue3手机桌面oadmin管理系统
基于uniapp+vue3+pinia2+uv-ui仿ios手机界面oa后台系统解决方案。支持运行到h5+小程序+app端。
235 5
|
2月前
|
存储 小程序 Java
热门小程序源码合集:微信抖音小程序源码支持PHP/Java/uni-app完整项目实践指南
小程序已成为企业获客与开发者创业的重要载体。本文详解PHP、Java、uni-app三大技术栈在电商、工具、服务类小程序中的源码应用,提供从开发到部署的全流程指南,并分享选型避坑与商业化落地策略,助力开发者高效构建稳定可扩展项目。
|
4月前
|
人工智能 小程序 前端开发
小程序、网站 vs. APP:成本差异究竟在哪里?技术栈如何决定项目上限?优雅草卓伊凡
小程序、网站 vs. APP:成本差异究竟在哪里?技术栈如何决定项目上限?优雅草卓伊凡
332 0
小程序、网站 vs. APP:成本差异究竟在哪里?技术栈如何决定项目上限?优雅草卓伊凡
|
4月前
|
缓存 小程序 视频直播
基于uni-app+vite5+vue3实战短视频+直播+聊天app应用
基于uniapp+vue3+vite5从0-1实战搭建仿抖音/微信直播带货商城。集短视频+聊天+直播功能于一体。实现全屏沉浸式切换短视频/直播,支持编译运行到h5+小程序端+app端。
352 4
|
8月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
461 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
5月前
|
BI 开发工具 开发者
App全渠道统计方案:如何用一个工具整合所有获客渠道数据?
还在为地推、社群、广告等不同获客渠道的数据分散而烦恼吗?本文将教您如何用一个工具整合所有渠道数据,实现精准的渠道归因与效果分析。
180 0
下一篇
oss云网关配置