uniapp（vue3.2语法糖）尝试使用pinia 获取uniapp中胶囊的top值，自定义搜索框高度与其相同

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

uniapp（vue3.2语法糖）尝试使用pinia
获取uniapp中胶囊的top值，自定义搜索框高度与其相同

一、main.js中引入pinia

import { createSSRApp } from 'vue'
import * as Pinia from 'pinia';
export function createApp() {
  const app = createSSRApp(App);
  app.use(Pinia.createPinia());
  return {
    app,
	Pinia,
  }
}

链接：添加链接描述

二、创建store

1.目录store/pinia.js

代码如下（示例）：

import { defineStore } from 'pinia';
import {ref} from 'vue'
export const useStore = defineStore('usePinia', () => {
	//变量
	const menuButtonInfoHight=ref(0);
	//函数
	const setHeight=()=>{
		//获取uniapp微信小程序胶囊按钮的top值赋值给变量
		menuButtonInfoHight.value = uni.getMenuButtonBoundingClientRect().top;
	}
	return {menuButtonInfoHight,setHeight};
});

2.使用pinia中变量和函数

引入store：

import { useStore } from '@/stores/pinia.js';
const store = useStore();

在onMounted生命周期中执行pinia中定义的方法给变量高度赋值

onMounted(() => {
	//获取pinia中的胶囊top值，设置到变量中
	store.setHeight();
})

此时store.menuButtonInfoHight中已有值，将其作为变量给元素添加margin-top,此时元素和胶囊按钮上高度一致

<view class="topSearch" :style="'margin-top:'+store.menuButtonInfoHight+'px;'">
		<text class="iconfont icon-fangdajing"></text>
		<input type="text" class="search-input" />
</view>

---

总结

还在学习，没啥好总结的，用的不对请大家及时指正。