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