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