Vue 3 Composition API w wielu komponentach

Question

Mam te pliki

App.vue, Header.vue, search.js i Search.vue

App.vue jest normalne i po prostu dodaje różne widoki

Header.vue ma pole wprowadzania

<input type="text" v-model="searchPin" @keyup="searchResults" />
<div>{{searchPin}}</div>

i scenariusz:

import useSearch from "@/compositions/search";

export default {
  name: "Header",
  setup() {
    const { searchPin, searchResults } = useSearch();

    return {
      searchPin,
      searchResults
    };
  }
};

search.js ma kod wielokrotnego użytku

import { ref } from "vue";

export default function useSearch() {
  const searchPin = ref("");

  function searchResults() {
    return searchPin.value;
  }

  return {
    searchPin,
    searchResults
  };
}

Teraz to działa dobrze ... gdy dodasz coś w polu wprowadzania, zostanie to pokazane w poniższym div.

Nie rozumiem, jak użyć tego kodu do trzeciego komponentu, takiego jak Search.vue.

Mam to, ale nie działa.

<template>
  <div>
    <h1 class="mt-3">Search</h1>
    <div>{{ searchPin }}</div>
  </div>
</template>

<script>
  import useSearch from "@/compositions/search";

  export default {
    name: "Search",
    setup() {
      const { searchPin, searchResults } = useSearch();

      return {
        searchPin,
        searchResults
      };
    }
  };
</script>

czego mi brakuje? Dzięki.

Answer 1

Rozwiązanie tego problemu jest bardzo proste

zamiast

import { ref } from "vue";

export default function useSearch() {
  const searchPin = ref("");

  function searchResults() {
    return searchPin.value;
  }

  return {
    searchPin,
    searchResults
  };
}

posługiwać się

import { ref } from "vue";

const searchPin = ref("");

export default function useSearch() {  

  function searchResults() {
    return searchPin.value;
  }

  return {
    searchPin,
    searchResults
  };
}

Problem polega na tym, że searchPinzakres funkcji obejmuje funkcję, więc za każdym razem, gdy wywołujesz funkcję, otrzymuje nową ref. W niektórych przypadkach jest to pożądany efekt, ale w twoim przypadku musisz go usunąć.

Oto przykład, który wykorzystuje oba, mam nadzieję, że to wyjaśnia.

const {
  defineComponent,
  createApp,
  ref
} = Vue


const searchPin = ref("");

function useSearch() {
    const searchPinLoc = ref("");

  function searchResults() {
    return searchPin.value + "|" + searchPinLoc.value;
  }

  return {
    searchPin,
    searchPinLoc,
    searchResults
  };
}

const HeaderComponent = defineComponent({
  template: document.getElementById("Header").innerHTML,
  setup() {
    return useSearch();
  },
})


const SearchComponent = defineComponent({
  template: document.getElementById("Search").innerHTML,
  setup() {
    return useSearch();
  }
})

createApp({
  el: '#app',
  components: {
    HeaderComponent, SearchComponent
  },
  setup() {}
}).mount('#app')

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <header-component></header-component>
  <search-component></search-component>
</div>

<template id="Header">
  searchPin : <input type="text" v-model="searchPin" @keyup="searchResults" />
  searchPinLoc : <input type="text" v-model="searchPinLoc" @keyup="searchResults" />
  <div>both: {{searchResults()}}</div>
</template>

<template id="Search">
  <div>
    <h1 class="mt-3">Search</h1>
    <div>both: {{searchResults()}}</div>
  </div>
</template>