vue3 hooks另一种思路vue3中的响应式变量state放在一个单独的ts文件中定义导出,并在多个vue文件中引入

//state.ts
import {reactive} from 'vue'
export const state=reactive({
  name:''
})

<!-- A.vue -->
<template>
  <div>
    {{state.name}}
  </div>
</template>
<script lang="ts" setup>
import {state} from './state'
</script>

<!-- A.vue -->
<template>
  <div>
    {{state.name}}
  </div>
</template>
<script lang="ts" setup>
import {state} from './state'
</script>

vue3中的响应式变量state放在一个单独的ts文件中定义导出,并在多个vue文件中引入使用。注意的是，有好处也有坏处，如果多个组件对 state 进行了修改，会影响到所有使用了该变量的组件。因此，需要确保对 state 的修改是可预测且可控的，避免出现意料之外的结果。