Vue 3 中的状态管理：使用 reactive 函数实现组件间通信和状态管理

在 Vue 3 中，使用 reactive 函数可以创建一个响应式对象，从而实现夸组件间的通信和状态管理。可以将 reactive 函数创建的状态管理单独放在一个 JavaScript 文件中，以实现更好的代码组织和复用。具体步骤如下：

1. 创建一个新的 JavaScript 文件，例如 store.js，用于存放状态管理代码。类似vuex 或 react-redux中的状态切片，把数据集中在一个地方统一管理。

2. 在 store.js 中使用 reactive 函数创建一个响应式对象，例如：

import { reactive } from 'vue';

const store = reactive({
  count: 0, //组件共享的数据(状态)
  increment() {
    this.count++;
  }
});

export default store;

3. 在组件中导入 store.js 中创建的响应式对象，例如：

import store from './store.js';

export default {
  setup() {
    // ... 
    return { 
        store 
    };
  }
}

4. 在组件模板中使用响应式对象的属性来渲染数据，例如：

<template>
  <div>
    Count: {{ store.count }}
    <button @click="store.increment">Increment</button>
  </div>
</template>

<script>
import store from './store.js';

export default {
  setup() {
    return { store };
  }
}
</script>

这样，就可以在多个组件中共享和复用 store.js 中创建的状态管理代码了。

需要注意的是，在使用 reactive 函数创建状态管理时，应该遵循 Vue 3 中的响应式规则，例如：

• 不能直接给响应式对象添加新的属性，应该使用 Vue.set 或 $set 方法。
• 不能直接修改响应式对象的数组索引，应该使用数组方法，例如 push、splice 等。
• 不能直接比较响应式对象，应该使用 Vue.observable 或 toRaw 方法将其转换为普通对象后比较。

遵循这些规则可以确保状态管理的正确性和可维护性。