VUE状态管理

多个组件共享一个共同的状态时，抽取出组件间的共享状态，放在一个全局单例中来管理;

方法一：用响应式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>