vue3 单一状态管理

1，问题

有一个全局错误弹窗，当项目中有接口报错时，会显示错误信息。

思路：在 axios 的响应拦截器中，满足条件后打开错误弹窗。

问题：如何在 js 文件（axios）中，向 vue 文件（错误弹窗）传参，而且是响应式的？

2，单一状态管理

vue -状态管理

一个比较容器想到的方式——状态管理器 Vuex 或 Pinia。借鉴这个思路，可以通过自定义一个全局单例来实现。

目录

-- api
  -- index.js
-- component
  -- dialogError
    -- index.vue
    -- useError.js

实现

1，dialogError/useError.js 实现单例。

import { ref } from 'vue'

// error 专属单例
const errorRef = ref(null)

export default errorRef

2，api/index.js 单例赋值。

import axios from 'axios'
import errorRef from '@/components/dialogError/useError'

axios.interceptors.request.use(
  // ...
)

axios.interceptors.response.use(
  function (response) {
    if (response.data.responseCode === '00000') {
      return response.data
    // 接口报错  
    } else {
      if (location.pathname !== '/error.html') {
        // 防止因为多个接口，多次执行
        if (!errorRef.value) {
          errorRef.value = response.data
        }
      } else {
        return response.data
      }
    }
  },
  function (error) {
    return Promise.reject(error)
  }
)

export default axios

3，dialogError/index.vue 单例使用。

<template>
  <Dialog :show="visible">
    <div>({{ errorRef }})</div>
    <div @click="handleClose">关闭</div>
  </Dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import Dialog from '../Dialog.vue'
import errorRef from './useError'

const visible = ref(false)
watch(
  () => errorRef.value,
  (nv) => {
    visible.value = !!nv
  }
)

const handleClose = () => {
  visible.value = false
}
</script>

以上。