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


相关文章
《仿盒马》app开发技术分享-- 确认订单页(数据展示)(29)
上一节我们实现了地址的添加,那么有了地址之后我们接下来的重点就可以放到订单生成上了,我们在购物车页面,点击结算会跳转到一个 订单确认页面,在这个页面我们需要有地址选择、加购列表展示、价格计算、优惠计算、商品数量展示等信息。
366 3
|
BI 开发工具 开发者
App全渠道统计方案:如何用一个工具整合所有获客渠道数据?
还在为地推、社群、广告等不同获客渠道的数据分散而烦恼吗?本文将教您如何用一个工具整合所有渠道数据,实现精准的渠道归因与效果分析。
503 0
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
1056 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
Windows
【Azure App Service】对App Service中CPU指标数据中系统占用部分(System CPU)的解释
在Azure App Service中,CPU占比可在App Service Plan级别查看整个实例的资源使用情况。具体应用中仅能查看CPU时间,需通过公式【CPU Time / (CPU核数 * 60)】估算占比。CPU百分比适用于可横向扩展的计划(Basic、Standard、Premium),而CPU时间适用于Free或Shared计划。然而,CPU Percentage包含所有应用及系统占用的CPU,高CPU指标可能由系统而非应用请求引起。详细分析每个进程的CPU占用需抓取Windows Performance Trace数据。
408 40
|
JSON API 网络安全
App数据的爬取
App数据的爬取
2206 3
|
存储 SQL JSON
【Azure Logic App】微软云逻辑应用连接到数据库,执行存储过程并转换执行结果为JSON数据
【Azure Logic App】微软云逻辑应用连接到数据库,执行存储过程并转换执行结果为JSON数据
258 0
【Azure Logic App】微软云逻辑应用连接到数据库,执行存储过程并转换执行结果为JSON数据
|
缓存
【Azure Function】Function App代码中使用Managed Identity认证获取Blob数据时遇见400报错
【Azure Function】Function App代码中使用Managed Identity认证获取Blob数据时遇见400报错
329 0
【Azure Function】Function App代码中使用Managed Identity认证获取Blob数据时遇见400报错
【Azure 事件中心】在Azure Function App中消费Event Hub数据,时常出现EventReceiveError
【Azure 事件中心】在Azure Function App中消费Event Hub数据,时常出现EventReceiveError
171 0
|
存储 缓存 NoSQL
实现返利App中的数据缓存与预加载机制
实现返利App中的数据缓存与预加载机制
|
安全 测试技术 网络安全
APP攻防-资产收集篇&反证书检验&XP框架&反代理VPN&数据转发&反模拟器
APP攻防-资产收集篇&反证书检验&XP框架&反代理VPN&数据转发&反模拟器
618 5

热门文章

最新文章