使用pinia对组件进行遥控

分三个部分:

1. 被遥控的组件
2. 遥控器
3. 使用

被遥控的组件

//Alert.vue
<script setup>
import { useAlert } from './useAlert.js'
const { alertState } = useAlert()
</script>

<template>
  <teleport to="body">
      <div v-if="alertState.isOpenAlert">
            <span>{{ alertState.info }}</span>
      </div>
  </teleport>
</template>

<style scoped></style>

之后将该组件放到需要挂载的页面中

遥控器

//useAlert.js
import { defineStore } from 'pinia'

export const useAlert = defineStore('alertState', () => {
  
  const alertState = ref({ isOpenAlert: false, info: '发生了错误' })

  const open = (info='发生了错误',time=1000) => {
    alertState.value.info = info
    alertState.value.isOpenAlert = true
    setTimeout(()=>{
      alertState.value.isOpenAlert = false
      alertState.value.info = '发生了错误'
    },time)
    //简单起见,这里没有做防抖节流,按理应该加一个,防止起冲突
  }
  
  const close = () => {
    alertState.value.info = '发生了错误'
    alertState.value.isOpenAlert = false
  } 

  return {
    alertState,
    open,
    close 
  }
})

open()函数为开按钮,接收两个参数,一个是alertInfo,另一个是time

close()函数为关按钮

使用

//在handleSome函数中使用
const handleSome = async () => {
  try {
    await addSome() //执行的任务
  } catch (error) {
    //当发生错误时:
    const { open } = useAlert() //拿到遥控器
    open(error.message) //将错误信息传入
  }
}

这样页面就弹出窗口,并附带了错误信息