有没有办法在 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 }
        }
      }
    }

是否可以在不使用 provide/inject 的情况下在另一个组件中使用 'foo' 的更新值？

我是 Vue 生态系统的新手；如果这是我在这里遗漏的明显内容，请深表歉意。

Answer 1

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

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

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

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

Is there a way to share reactive data between random components in Vue 3 Composition API?

vue.js

vuejs3

vue-composition-api