Vue 3 中的状态管理：使用 reactive 函数实现组件间通信和状态管理
在 Vue 3 中，使用 reactive 函数可以创建一个响应式对象，从而实现夸组件间的通信和状态管理。可以将 reactive 函数创建的状态管理单独放在一个 JavaScript 文件中，以实现更好的代码组织和复用。具体步骤如下：
-
创建一个新的 JavaScript 文件，例如
store.js，用于存放状态管理代码。类似vuex 或 react-redux中的状态切片，把数据集中在一个地方统一管理。 -
在
store.js中使用reactive函数创建一个响应式对象，例如：
import { reactive } from 'vue';const store = reactive({count: 0, //组件共享的数据(状态)increment() {this.count++;}
});export default store;
- 在组件中导入
store.js中创建的响应式对象，例如：
import store from './store.js';export default {setup() {// ... return { store };}
}
- 在组件模板中使用响应式对象的属性来渲染数据，例如：
<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方法将其转换为普通对象后比较。
遵循这些规则可以确保状态管理的正确性和可维护性。