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)
相关推荐
qq_424409192 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
2501_915918412 小时前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
兴趣使然_3 小时前
【笔记】使用 html 创建网址快捷方式
笔记·html·js
不知名It水手4 小时前
uniapp运行项目到ios基座
ios·uni-app·cocoa
hunzi_14 小时前
搭建商城系统
java·uni-app·php
aramae5 小时前
C++ -- STL -- vector
开发语言·c++·笔记·后端·visual studio
fen_fen5 小时前
学习笔记(32):matplotlib绘制简单图表-数据分布图
笔记·学习·matplotlib
合作小小程序员小小店7 小时前
web网页,在线%食谱推荐系统%分析系统demo,基于vscode,uniapp,vue,java,jdk,springboot,mysql数据库
vue.js·spring boot·vscode·spring·uni-app
普宁彭于晏8 小时前
Uni-app 生命周期与钩子:程序的“生命”旅程
uni-app·vue
饕餮争锋9 小时前
设计模式笔记_创建型_建造者模式
笔记·设计模式·建造者模式