【Vue】状态提升（state lifting）

Vue中的状态提升（state lifting）是一种将状态从组件中移动到共同的父级组件的模式。这种模式允许多个子组件共享相同的状态，从而实现组件之间的通信和数据共享。

在Vue中，组件可以拥有自己的状态（data），并且可以通过props将状态传递给其子组件。然而，有时候多个子组件需要访问相同的状态，这时就可以使用状态提升来避免状态的重复定义和传递。

下面是一个使用状态提升的示例（使用的是单文件组件）：

// 父组件 App.vue
<template>
  <div id="app">
    <ChildComponent :count="count" @increment="incrementCount" />
    <OtherChildComponent :count="count" />
  </div>
</template>

<script>
import OtherChildComponent from "./components/OtherChildComponent.vue";
import ChildComponent from "./components/ChildComponent.vue";
export default {
  data() {
    return {
      count: 0,
    };
  },
  components: {
    ChildComponent,
    OtherChildComponent,
  },
  methods: {
    incrementCount() {
      this.count++;
    },
  },
};
</script>

</script>


// 子组件1 ChildComponent.vue
<template>
  <div>
    <button @click="increment">{{ count }}</button>
  </div>
</template>

<script>
export default {
  props: ["count"],
  methods: {
    increment() {
      this.$emit("increment");
    },
  },
};
</script>


// 子组件2 OtherChildComponent.vue
<template>
  <div>
    <p>{{ count }}</p>
  </div>
</template>

<script>
export default {
  props: ['count']
};
</script>

在上面的示例中，父组件包含一个计数器的状态count，它通过props分别传递给两个子组件。第一个子组件是一个按钮，点击按钮时会通过事件increment通知父组件更新计数器的值。第二个子组件只是简单地显示计数器的值。

通过状态提升，两个子组件可以共享同一个状态，并且可以相互通信。当第一个子组件点击按钮时，计数器的值会在父组件中更新，然后通过props传递给第二个子组件，从而实现了状态的共享和更新。

这种模式可以用于更复杂的情况，其中多个组件需要访问和修改相同的状态。通过将状态提升到共同的父级组件，可以更好地管理和组织状态，并促进组件之间的通信和协作。