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

ops/2024/10/18 0:29:32/

一、创建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.ppmy.cn/ops/38011.html

相关文章

配电室智能巡检机器人

近年来&#xff0c;生产过程高度自动化&#xff0c;各工矿企业关键场所需定期巡检维护。但目前巡检主要靠人工&#xff0c;既耗时费力效率又低&#xff0c;且受环境等因素影响&#xff0c;巡检难以全面规范&#xff0c;隐患或问题易被忽视。在此情况下&#xff0c;如何利用现有…

(类)偏特化Partial Specialization

当编写一个模板特化&#xff0c;涉及部分但不是全部模板参数时&#xff0c;它被称为偏特化&#xff08;Partial Specialization&#xff09;。【注意&#xff0c;偏特化是针对类模板而言&#xff0c;函数模板不可偏特化&#xff0c;只能全特化】 偏特化是C模板编程中的一种技术…

基于Springboot的教学资源共享平台(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的教学资源共享平台&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构…

【Linux】gcc/g++的使用

&#x1f389;博主首页&#xff1a; 有趣的中国人 &#x1f389;专栏首页&#xff1a; Linux &#x1f389;其它专栏&#xff1a; C初阶 | C进阶 | 初阶数据结构 小伙伴们大家好&#xff0c;本片文章将会讲解Linux中gcc/g使用的相关内容。 如果看到最后您觉得这篇文章写得不错…

[前端异步]循环中所有异步任务完成才往下运行?

reqData(){this.startLoading();//获取分析结果数据for (let i 1; i <24;i 1) {try {let formattedValue i.toString().padStart(4, 0);this.requestData(formattedValue).then((PromiseResult) > {if(PromiseResult.status"success"){this.images.push(Pro…

idea 项目 修改项目文件名 教程

文章目录 目录 文章目录 修改流程 小结 概要流程技术细节小结 概要 原项目名 修改流程 关掉当前项目的idea页面 修改之后的文件名 重新打开idea。选择项目打开项目页面 技术细节 出现下面这个问题&#xff0c;可以参考作者新的一编文章idea开发工具 项目使用Spring框架开发解…

js如何把json列表转成数组

在JavaScript中&#xff0c;JSON列表&#xff08;通常指的是JSON数组&#xff09;可以被直接解析成JavaScript数组。这是通过使用JSON.parse()方法实现的。 假设你有一个JSON列表的字符串&#xff0c;如下所示&#xff1a; [{"name": "Alice", "age…

Oracle 19c 单实例adg 一主一备搭建

Oracle 19c 单实例adg 一主一备搭建 首次搭建oracle adg&#xff0c;整理了搭建主备的步骤及遇到的问题 主库配置 开启主库监听 lsnrctl start开启归档模式 --先查看当前的归档模式 archive log list; --当 database log mode显示为no archive mode即为已经需要开启归档&a…