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)
相关推荐
小徐_23332 天前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
iOS阿玮2 天前
永远不要站在用户的对立面,挑战大众的公知。
uni-app·app·apple
xw52 天前
uni-app中v-if使用”异常”
前端·uni-app
!win !2 天前
uni-app中v-if使用”异常”
前端·uni-app
Emma歌小白3 天前
如何首次运行小程序后端
微信小程序
赣州云智科技的技术铺子3 天前
【一步步开发AI运动APP】十二、自定义扩展新运动项目1
微信小程序·小程序·云开发·智能小程序
_落纸3 天前
三大基础无源电子元件——电阻(R)、电感(L)、电容(C)
笔记
2501_915918413 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
Alice-YUE3 天前
【CSS学习笔记3】css特性
前端·css·笔记·html
2303_Alpha3 天前
SpringBoot
笔记·学习