21.vue学习篇-props，provide，inject，pinia

在 Vue 中，props、provide、inject和Pinia都是用于管理组件之间状态传递和共享的机制，它们各自有不同的用途和特点。

一、props

1.作用和方法

• props是父组件向子组件传递数据的主要方式。子组件通过在其选项中声明props来接收父组件传递过来的数据。
• 父组件在使用子组件时，可以通过属性绑定的方式将数据传递给子组件的props。

  <!-- 父组件 -->
  <template>
      <ChildComponent :message='parentMessage'/>
  </template>
  
  <script>
      import ChildComponent from './ChildComponent.vue'
      
      export default {
          components: { ChildComponent },
          data () {
              return {
                  parentMessage: 'Hello from parent'
              }
          }
      }
  </script>
  
  <!-- 子组件 -->
  <template>
      <div>{{ message }}</div>
  </template>
  
  <script>
      export default {
          props: {
              message: String
          }
      }
  
  </script>

2.优点&注意事项

• 优点：明确了组件之间的数据流向，使得组件的接口更加清晰。同时，props是单向数据流，即父组件向子组件传递数据，子组件不能直接修改props的值，保证了数据的一致性和可预测性。

• 注意事项：在定义props时，需要指定数据的类型，以便进行类型检查。同时，当props的值发生变化时，子组件会自动重新渲染，但如果props是复杂对象类型，需要注意浅拷贝和深拷贝的问题。

二、provide /inject

1.作用和方法

• provide和inject是 Vue 中用于实现跨层级组件通信的机制。父组件可以通过provide选项提供数据，子组件及其后代组件可以通过inject选项注入这些数据。

  
  <!-- 父组件 -->
  <template>
    <div> Parent Component</div>
  </template>
  
  <script>
    export default {
      provide () {
        return {
          message: "hello from parent"
        }
      }
    }
  </script>
  
  
  <!-- 子组件 -->
  <template>
    <div>
      {{ injectedMessage }}
    </div>
  </template>
  
  <script>
  export default {
    inject: ['message'],
    computed: {
      injectedMessage () {
        return this.message
      }
    }
  }
  </script>

2.优点&注意事项

• 优点：可以实现跨多个层级的组件之间的数据传递，避免了通过层层传递props的繁琐。同时，provide和inject可以在任何组件中使用，使得数据的共享更加灵活。
• 注意事项：由于数据的传递是通过依赖注入的方式实现的，因此在使用时需要注意数据的来源和变化的影响。同时，为了避免命名冲突，建议在提供数据时使用唯一的键名。

三、Pinia

1.作用和方法

• Pinia是 Vue 的状态管理库，它提供了一种集中式的状态管理方式，可以在多个组件之间共享和管理状态。
• 使用Pinia，首先需要创建一个 store，然后在组件中通过useStore函数来访问和操作 store 中的状态。

  // store.js
   import { defineStore } from 'pinia'
  
   export const useCountStore = defineStore('counter', {
    state: () => ({
      count: 0
    }),
    actions: {
      increment () {
        this.count ++
      }
    }
   })
  
  
  
  // html
  <!-- 组件 -->
  <template>
    <div>
      <p> Count: {{ counterStore.count }}</p>
      <button @click="counterStore.increment">Increment</button>
    </div>
  </template>
  
  <script>
    import { useCounterStore } from './store.js'
  
    export default {
      setup () {
        const counterStore = useCounterStore()
        return {
          counterStore
        }
      }
    }
  </script>

2.优点&注意事项

• 优点：提供了一种清晰的状态管理方式，使得状态的变化更加可预测和易于维护。同时，Pinia支持模块化的 store，可以将不同的状态分组管理，提高代码的可维护性。此外，Pinia还提供了一些高级功能，如插件、中间件等，可以满足更复杂的应用需求。
• 注意事项：在使用Pinia时，需要注意状态的变化是否会影响到其他组件的行为。同时，为了保证状态的一致性，建议在修改状态时使用 store 中的 actions 方法，而不是直接修改 state 对象。

总之，props、provide/inject和Pinia都是 Vue 中用于管理组件之间状态传递和共享的有效机制。在实际应用中，可以根据具体的需求选择合适的方式来实现组件之间的通信和状态管理。