uniapp/vue3/使用pinia

1.说明

uniapp自带pinia，我们并不需要额外去安装，但是要在main.js中引入。

2.引入pinia

打开main.js，没有引入uviewplus需要先引入。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 引入uviewplus
import uviewPlus from 'uview-plus'
// 引入pinia
import * as Pinia from 'pinia';
import { createSSRApp } from 'vue'
export function createApp() {
	const app = createSSRApp(App)
	// 要在app创建之后使用
	app.use(uviewPlus)
	// 使用pinia
	app.use(Pinia.createPinia());
	return {
		app,
		Pinia // 必须返回pinia
	}
}

3.使用

在根目录下创建store目录，在store目录下新建user.js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import {
	defineStore
} from 'pinia'
//创建用户小仓库
const useUserStore = defineStore('User', {
	state: () => {
		return {
			count: 0
		}
	}
})

//暴露用户小仓库
export default useUserStore

在某个页面我们去写个事件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// index.vue
<template>
	<view>
		<up-button type="primary" :plain="true" :hairline="true" text="细边" @click="add()">{{ useStore.count }}</up-button>
	</view>
</template>

<script setup>
	//引入用户相关的小仓库
	import useUserStore from '@/store/user.js'
	const useStore = useUserStore()
	//定义button点击事件add
	const add = () => {
		console.log(useStore.count++);
	}
</script>

自行测试：