有没有办法在 Vue 3 Composition API 中的随机组件之间共享反应数据？

Question

“组件 A”中有一些反应性常量，可能会在某些用户操作后更新，如何将这些数据导入到另一个组件中？例如：

const MyComponent = {
      import { computed, ref } from "vue";
      setup() {
        name: "Component A",
        setup() {
          const foo = ref(null);
          
          const updateFoo = computed(() => foo.value = "bar");
          
          return { foo }
        }
      }
    }

'foo' 的更新值可以在另一个组件中使用而不使用提供/注入吗？

我对 Vue 生态系统还很陌生；如果这是我在这里遗漏的明显内容，我深表歉意。

Answer 1

最好的事情之一composition API是我们可以创建可重用的逻辑并在整个应用程序中使用它。您composable functions可以在其中创建逻辑，然后将其导入到要使用它的组件中。这不仅使您的组件更加干净，而且使您的应用程序更加可维护。下面是一个简单的计数器示例，展示了如何使用它们。您可以在这里找到工作演示：

为计数器创建一个可组合函数：

import { ref, computed } from "vue";
const counter = ref(0);
export const getCounter = () => {
  const incrementCounter = () => counter.value++;
  const decrementCounter = () => counter.value--;
  const counterPositiveOrNegitive = computed(() =>
    counter.value >= 0 ? " Positive" : "Negitive"
  );
  return {
    counter,
    incrementCounter,
    decrementCounter,
    counterPositiveOrNegitive
  };
};

然后你可以将此函数导入到你的组件中并获取你想要使用的函数。递增计数器的组件。

 <template>
  <div class="hello">
    <h1>Component To Increment Counter</h1>
    <button @click="incrementCounter">Increment</button>
  </div>
</template>

<script>
import { getCounter } from "../composables/counterExample";
export default {
  name: "IncrementCounter",
  setup() {
    const { incrementCounter } = getCounter();
    return { incrementCounter };
  },
};
</script>

递减计数器的组件：

<template>
  <div class="hello">
    <h1>Component To Decrement Counter</h1>
    <button @click="decrementCounter">Decrement</button>
  </div>
</template>

<script>
import { getCounter } from "../composables/counterExample";
export default {
  name: "DecrementCounter",
  setup() {
    const { decrementCounter } = getCounter();
    return { decrementCounter };
  },
};
</script>

然后在主组件中，您可以显示计数器值。

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div class="counters">
    <IncrementCounter />
    <DecrementCounter />
  </div>
  <h3>Main Component </h3>
  <p>Counter: {{ counter }}</p>
  <p>{{ counterPositiveOrNegitive }}</p>
</template>

<script>
import IncrementCounter from "./components/IncrementCounter.vue";
import DecrementCounter from "./components/DecrementCounter.vue";
import { getCounter } from "./composables/counterExample";
export default {
  name: "App",
  components: {
    IncrementCounter: IncrementCounter,
    DecrementCounter: DecrementCounter,
  },
  setup() {
    const { counter, counterPositiveOrNegitive } = getCounter();
    return { counter, counterPositiveOrNegitive };
  },
};

希望这有点帮助。您可以在这里找到一个工作示例：

https://codesandbox.io/s/vue3-composition-api-blfpj