vue中状态管理与组件通信的各种方法

1. Props 和自定义事件（����/emit/on）：

   • 组件之间可以通过 Props 传递数据，父组件向子组件传递状态。
   • 子组件通过 $emit 自定义事件将状态变化通知给父组件或其他监听者。

2. Provide/Inject：

   Vue 提供了 provide 和 inject API，允许祖先组件向其所有子孙后代提供全局作用域的数据。

   在 Vue 2 中，我们通过选项式 API 来使用 provide 和 inject。

   // 父组件（祖先组件）
   export default {
     provide: {
       // 提供一个对象或函数返回的对象，键值对表示提供的属性名和值
       someData: 'Hello, World!', 
       // 或者
       getData() {
         return this.computedData;
       }
     },
     data() {
       return {
         computedData: 'Computed Data'
       };
     }
   }
   
   // 子组件或孙子组件
   export default {
     inject: ['someData', 'getData'],
     computed: {
       message() {
         return this.someData + ' from parent';
       },
       computedFromParent() {
         return this.getData();
       }
     }
   }

   在 Vue 3 中，由于引入了 Composition API，provide 和 inject 的使用方式有所改变，并且它们是作为函数使用的：

   //组件组件
   import { provide, reactive } from 'vue';
   
   export default {
     setup() {
       const state = reactive({
         someData: 'Hello, Vue 3',
         computedData: 'Computed Data in Vue 3'
       });
   
       provide('state', state);
       
       // 或者只提供特定字段
       provide('someData', state.someData);
   
       return {};
     }
   }
   
   //子孙组件
   import { inject, ref } from 'vue';
   
   export default {
     setup() {
       const providedState = inject('state');
       const someData = ref(providedState?.someData || '');
   
       const computedFromParent = ref(providedState?.computedData || '');
   
       return {
         someData,
         computedFromParent
       };
     }
   }

   在Vue 2中，注入的原始数据如果不是响应式对象（如data、computed等产生的属性），则在祖先组件中修改该数据后，子孙组件不会自动更新视图。若要实现响应式效果，Vue 2中需要确保注入的是一个响应式对象或者通过getter函数返回一个响应式值。

3. Vuex：

   Vuex 是一个专门为 Vue.js 应用程序设计的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并确保状态以可预测的方式发生变化。Vuex 提供了 state、mutation、action、getter 等核心概念，适用于大型单页面应用中复杂的全局状态管理。

4. Event Bus（事件总线）：

   创建一个全局的事件中心（通常是空的 Vue 实例），用来作为不同组件之间通信和共享状态的一种方式。

   import Vue from 'vue';
   const eventBus = new Vue();
   export default eventBus;

   // 发送事件
   eventBus.$emit('customEvent', someData);
   
   // 接收事件
   eventBus.$on('customEvent', (data) => {
     console.log(data);
   });

5. Pinia：

   Pinia 是 Vue.js 官方推荐用于 Vue 3 的状态管理库，它构建在 Vue 3 的 Composition API 之上，提供了与 Vuex 类似的功能，但更轻量级且更容易上手。

6. mixin:
   Vue.js 中的 Mixins 可以用来在多个组件之间共享可复用的代码，包括数据、方法和生命周期钩子等。Mixins 在一定程度上可以实现全局状态或逻辑的复用，但它并不是专门针对状态管理设计的解决方案。

根据项目的规模和需求复杂度，可以选择合适的方案来管理应用的状态。对于小型项目，局部状态和 Prop 传递可能已经足够；随着项目复杂度的增加，往往需要引入如 Vuex 或 Pinia 这样的状态管理库来提高代码可维护性和状态的一致性。