vue.js - 有没有办法在 Vue 3 Composition API 中的随机组件之间共享 react 数据？

Question

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

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

是否可以在不使用提供/注入(inject)的情况下将“foo”的更新值用于另一个组件？

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

Answer 1

关于 composition API 的最好的事情之一是我们可以创建可重用的逻辑并在整个应用程序中使用它。您创建一个可组合函数，您可以在其中创建逻辑，然后将其导入到您要使用它的组件中。这不仅使您的组件更简洁，而且您的应用程序更易于维护。下面是一个简单的计数器示例，展示了如何使用它们。你可以找到工作 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