多个组件共享一个共同的状态时，抽取出组件间的共享状态，放在一个全局单例中来管理;
方法一：用响应式API做简单状态管理
如果你有一部分状态需要在多个组件实例间共享，你可以使用 reactive() 来创建一个响应式对象，并将它导入到多个组件中
//store.js
import {reactive} from 'vue'export const store = reactive({count:0，
})组件中使用：
<script setup>import { store } from './store.js'
</script><template>count值 {{ store.count }}
</template>每当store对象被更改时，组件都会自动更新。
在每个组件中也可以随意修改它的状态：
<script setup>import { store } from './store.js'
</script><template><button @click="store.count++">count值 {{ store.count }}</button>
</template>在任何组件中任意改变全局状态不太容易维护，为了确保改变状态的逻辑像状态一样集中，建议在store上定义方法，方法名要能表达出行动的意图：
//store.js
import {reactive} from 'vue'export const store = reactive({count:0,increment() {this.count++}
})<template><button @click="store.increment()">count值 {{ store.count }}</button>
</template>