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