uniapp开发微信小程序笔记12-uniapp中使用Pinia

前言：

为了方便保存用户登录状态，需要选择使用状态机来存用户信息
uni-app项目中默认就已经下载好了Vuex和Pinia状态机，可以直接在项目中进行状态机的配置和使用
vue3项目Vuex和Pinia都可以用，vue2项目只能用Vuex

一、配置Pinia

1、创建配置文件

在项目目录下新建stores目录，在新建user.js

复制代码

stores
    |--- user.js

2、全局挂载Pinia

在main.js中进行以下配置：

javascript 复制代码

import App from './App'
import store from './store/index.js'
import uviewPlus from 'uview-plus'
import * as Pinia from 'pinia';

// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'

Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
	store,
	...App
})
app.$mount()
// #endif

// #ifdef VUE3
import {
	createSSRApp
} from 'vue'
export function createApp() {
	const app = createSSRApp(App)
	app.use(Pinia.createPinia());
	app.use(uviewPlus)
	return {
		app,
		Pinia // 此处必须将 Pinia 返回
	}
}
// #endif

主要看与Pinia相关的三句,将这三句放到适当的位置就行

javascript 复制代码

import * as Pinia from 'pinia';

app.use(Pinia.createPinia());

Pinia // 此处必须将 Pinia 返回

3、配置仓库

这里其实就和我们在vue3项目中使用Pinia一样了

stores---user.js：

javascript 复制代码

import {
	defineStore
} from 'pinia';
import api from '../api'

export const useUserStore = defineStore('user', {
	state: () => {
		return {
			userInfo: {}
		};
	},

	actions: {
		// 发送请求
		async getUserInfoAsync() {
			const res = await api.getUserInfo();
			if (res.code == 200) {
				this.userInfo = res.data;
			}
		}
	},
});

4、组件中使用Pinia

因为用户信息需要在进入小程序时就应该校验的，所以在app.vue中发送请求获取用户信息：

javascript 复制代码

<script setup>
	import {
		onLaunch
	} from '@dcloudio/uni-app';
	import {
		useUserStore
	} from './stores/user';

	const userStore = useUserStore();
	onLaunch(() => {
		//小程序初始化时执行
		console.log('App Launch')
		userStore.getUserInfoAsync()
	})
</script>

<style lang="scss">
	@import "uview-plus/index.scss";

	/*每个页面公共css */
	page {
		/* background-color: aqua; */
	}
</style>

取state的数据：（这个视项目情况而定，在什么时候去做判断）

javascript 复制代码

import { useUserStore } from './stores/user';

const userStore = useUserStore();

console.log(userStore.userInfo)