fix: vuex useStore in script setup crashes inspector

Author: Akryum

packages/shared-utils/src/util.ts

@@ -240,6 +240,10 @@ function replacerForInternal (key) {
       return `[native VNode <${val.tag}>]`
     } else if (typeof HTMLElement !== 'undefined' && val instanceof HTMLElement) {
       return encodeCache.cache(val, () => getCustomHTMLElementDetails(val))
+    } else if (val.constructor?.name === 'Store' && val._wrappedGetters) {
+      return `[object Store]`
+    } else if (val.currentRoute) {
+      return `[object Router]`
     }
     const customDetails = getCustomObjectDetails(val, proto)
     if (customDetails != null) return customDetails

packages/shell-dev-vue3/src/SetupScript.vue

@@ -1,6 +1,8 @@
 <script setup>
 import Child from './Child.vue'
 import { ref, computed, reactive } from 'vue'
+import { useStore } from 'vuex'
+import { useRouter } from 'vue-router'
 
 const myObj = reactive({
   foo: 'bar',
@@ -19,6 +21,13 @@ const state2 = reactive({
 function onClick () {
   count.value++
 }
+
+const throws = computed(() => { throw new Error('oops') })
+
+const store = useStore()
+const throwsWithVuex = computed(() => store.getters.throws)
+
+const router = useRouter()
 </script>
 
 <template>

packages/shell-dev-vue3/src/store.js

@@ -9,6 +9,9 @@ const store = createStore({
   },
   getters: {
     answer: (state) => state.answer,
+    throws: () => {
+      throw new Error('getter error')
+    },
   },
   mutations: {
     increment (state) {