add hook(useBoundary)

Author: xyhxx

README.md

@@ -207,6 +207,18 @@ import FallbackComponent, from './fallback.vue';
 You can view the examples used with suspend+vue-query in the
 [codesandbox](https://codesandbox.io/s/pcmg9e)
 
+## useBoundary
+
+It is not necessary to obtain reset and error through props,more convenient to use hook.
+
+```ts
+
+const {error, reset} = useBoundary();
+console.log(error?.message, error?.name);
+...
+
+```
+
 # Devtools
 
 Support Vue devtools.You can view the error information and other contents in the developer tool.

__tests__/capture.test.ts

@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-
+import { describe, test, beforeEach, expect } from 'vitest';
 import ClickThrow from './components/click.vue';
 import Caputre from './components/capture.vue';
 import ErrorBoundary, { ErrorBoundaryProps } from '@src';

__tests__/components/capture.vue

@@ -7,7 +7,7 @@ defineProps<{
 
 <template>
   <p id="error">{{ error.name }},{{ error.message }}</p>
-  <button @click="reset" id="reset">Reset</button>
+  <button id="reset" @click="reset">Reset</button>
 </template>
 
 <script lang="ts">

__tests__/components/click.vue

@@ -5,5 +5,11 @@ function throwError() {
 </script>
 
 <template>
-  <button @click="throwError" id="throw">throw error</button>
+  <button id="throw" @click="throwError">throw error</button>
 </template>
+
+<script lang="ts">
+export default {
+  name: 'ClickTestComponent',
+};
+</script>

__tests__/components/hook.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { useBoundary } from '@src';
+
+const { reset, error } = useBoundary();
+</script>
+
+<template>
+  <p id="error_info">{{ error?.message ?? '' }}</p>
+  <button id="reset_btn" @click="reset">reset</button>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'HookTestComponent',
+};
+</script>

__tests__/components/network.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useQuery } from 'vue-query';
 import axios from 'axios';
+
 const props = defineProps<{ returnError: boolean }>();
 
 const { data, suspense } = useQuery(
@@ -17,9 +18,8 @@ const { data, suspense } = useQuery(
 
     if (data.status === 'success') {
       return data.data;
-    } else {
-      throw new Error(data.data);
     }
+    throw new Error(data.data);
   },
   { retry: false },
 );

__tests__/components/refError.vue

@@ -5,7 +5,7 @@ function throwError() {
 </script>
 
 <template>
-  <button @click="throwError" id="ref_error">ref error</button>
+  <button id="ref_error" @click="throwError">ref error</button>
 </template>
 
 <script lang="ts">

__tests__/components/typeError.vue

@@ -5,7 +5,7 @@ function throwError() {
 </script>
 
 <template>
-  <button @click="throwError" id="type_error">type error</button>
+  <button id="type_error" @click="throwError">type error</button>
 </template>
 
 <script lang="ts">

__tests__/define.test.ts

@@ -1,4 +1,5 @@
 import ErrorBoundary from '@src';
+import { describe, test, expect } from 'vitest';
 
 describe('VueErrorBoundary is define', function () {
   test('VueErrorBoundary is define', function () {

__tests__/emits.test.ts

@@ -7,6 +7,7 @@ import ClickThrow from './components/click.vue';
 import Caputre from './components/capture.vue';
 import { mount } from '@vue/test-utils';
 import { defineComponent, h } from 'vue';
+import { describe, test, expect } from 'vitest';
 
 const App = defineComponent({
   emits: ['captured'],