uni-app中，常见页面通讯方式

目录

目录

方式一：url查询字符串和EventChannel

方式二：使用全局事件总线

方式三：全局数据globalData

方式四：本地存储

方式五：Vuex和Pinia,状态管理库

---

---

方式一：url查询字符串和EventChannel

        url传参：

uni.navigateTo({
	url:"/pages/index/index?id=1"
})

        接收参数：

               第一种方式使用props来接收

                第二种方式使用onLoad(options) 来接收

props:["id"],
onLoad(options) {
	console.log(this.id,"接收的参数")
	console.log(options,"接收参数")
},

         使用this.getOpenerEventChannel() 事件渠道传参：

                传递：

//事件渠道
this.getOpenerEventChannel().emit('setDataTwoDa',"我是传递回来的数据")

                接收：

uni.navigateTo({
		url:"/pages/index/index?id=1",
		// 接收事件渠道传递的参数
		events:{
			setDataTwoDa:data=>{
				console.log(data,"接收参数")
				}
			}
		})

方式二：使用全局事件总线

        传递：

uni.$emit("jieshou",{name:"张三"})

        接收：

// 事件总线
uni.$on("jieshou",(value)=>{console.log("接受到事件总线的数据",value)})

方式三：全局数据globalData

        在App.vue中配置globalData

        

 在页面中使用 getApp().globalData 获取数据：

		onLoad(options) {
			// 接收全局globalData
			let da = getApp().globalData.count
			console.log(da,"全局")
		},

修改globalData中的数据：

methods: {
			add(){
				getApp().globalData.count = 10
				console.log(getApp().globalData.count)
			}
		}

方式四：本地存储

        存数据 使用 uni.setStorageSync() 第一个参数名称 ,第二个参数 数据 （必须是字符串，对象的话可以使用 JSON.stringify() 转为字符串）：

uni.setStorageSync("user","李四")

        拿数据 使用 uni.getStorageSync() 参数为名称：

let data = uni.getStorageSync("user")
console.log(data)

方式五：Vuex和Pinia,状态管理库

        Pinia的用法  使用Pinia 无需下载只需要配置就好了：

        在main.js中进行配置

          

创建一个文件夹  stores:

        在  stores/counter.js   中存放Pinina 数据 

import {
	defineStore
} from 'pinia';

export const useCounterStore = defineStore('counter', {
	state: () => {
		return {
			count: 0
		};
	},
	// 也可以这样定义
	// state: () => ({ count: 0 })
	actions: {
		increment() {
			this.count++;
		},
	},
});

在组件中使用他：

        

<template>
	<view>
		{{ counter.count }}
		<button @click="add">加一</button>
	</view>
</template>

<script setup>
	import {useCounterStore} from '@/stores/counter';
	// 获取数据
	const counter = useCounterStore();

	// 修改pinia中数据
	function add() {
		// 手动触发
		counter.$patch({ count: counter.count + 1 });
		// 或者使用 actions
		// counter.increment();
	}
</script>

<style>