本文最后更新于355 天前,其中的信息可能已经过时,如有错误请发送邮件到1986413837@qq.com
1.昨日遗留问题解决 — 在Pinia仓库中不要请求数据了啊 写一个同步方法在首页请求到数据后存储不就完了吗
import {
defineStore
} from 'pinia';
import {
ref
} from 'vue';
export const useInformationStore = defineStore('news', () => {
const informationData = ref([]); // 存储资讯数据
// 获取资讯数据的方法
// const fetchInfomationData = async () => {
// const response = await apiGetHomeData();
// informationData.value = response.informationList;
// };
// 手动设置数据的方法
const fetchData = (data) => {
informationData.value = data;
};
// 返回 state 和方法
return {
informationData,
fetchData
};
}, {
persist: true // 正确传递持久化选项
});
2.Pinia持久化语法别写错了 要和仓库主体分开写的
defineStore( ‘storeName’ ,( )=>{ 仓库内容 , return { 要供全局使用的变量 } } , { persist : true } )
3.实现navigator不跳转而是显示客服卡牌功能

这部分除了第一个都是链接跳转 平台客服卡片点击后是出现一个popup卡片 一开始是用数组遍历navigator渲染的 所以问题在于给第一个卡片添加点击事件并且不跳转
才开始想使用e.preventDefalut阻止跳转 但是不可以 因为Uniapp有限制
uni-app 的 navigator 组件底层是原生导航,无法通过 DOM 事件阻止默认行为
后面改使用动态路由 根据遍历的index设置路由和是否触发事件
<navigator v-for="(item,index) in itemList" :url="index === 0 ? '' : item.navigateUrl"
:key="index + 'index'" class="line_item" @click="index === 0?openPop() : null">
<view class="line_box">
<view :class="`iconBox${index+1}`">
</view>
<view class="">
{{ item.text }}
</view>
</view>
</navigator>
4.父组件触发子组件事件
因为popup组件多处使用 我将其封装为组件 popup组件内部是有函数的 所以在首页点击想要出现popup需要调用子组件的方法 在子组件中通过defineExpose暴露即可
//子组件
import {
ref
} from 'vue'
const popup = ref()
//联系客服弹窗
const open = () => {
console.log(1);
popup.value.open('center')
}
defineExpose({
open
}) //暴露出要给父组件使用的方法
父组件中通过ref绑定组件使用子组件方法
//template
<PopUp ref="pop"></PopUp>
//JS
const pop = ref(null)
const openPop = (index) => {
if (pop.value) {
pop.value.open()
}
}
5.从今天开始我就20岁了 把我的网站小小装饰了一下 就当是放松放松啦
6.用LiveServer打开网页 进入的端口总是一个文件夹 不能直接打开网页 十分令人烦躁 搞了很久没搞好
换了一个新插件就行了Preview on Web Server 感觉还不错
爽了……