Vue3 | Pinia - 在可組合函數中觀看 storeToRefs 不起作用

Question

我試圖了解可組合的目的。 我有一個像這樣的簡單組合，並試圖從watch不觸發的 Pinia 商店觀看狀態：

import { ref, watch, computed } from "vue";
import { storeToRefs } from "pinia";
import useFlightsStore from "src/pinia/flights.js";
import usePassengersStore from "src/pinia/passengers.js";

export function useFlight() {
    const route = useRoute();

    const modalStore = useModalStore();
    const flightsStore = useFlightsStore();
    const { selection } = storeToRefs(flightsStore);

    const passengersStore = usePassengersStore();
    const { passengers, adults, children, infants } =
        storeToRefs(passengersStore);

    watch([adults, children, infants], (val) => console.log('value changes', val))

在 Vue 組件中，同樣的東西可以按預期工作。

所以我們不能觀察可組合物中的值嗎？

Answer 1

我認為您可以查看可組合物中的值。

但是，要查看 pinia 狀態，它必須在箭頭函數內：

watch(() => somePiniaState, (n) => console.log(n, " value changed"));

這就像看一個反應物體。

---

我相信這應該更好地記錄下來。 在 Pinia 文檔中，我們可以閱讀如何查看整個商店或如何訂閱商店，但不能閱讀如何查看組件或可組合中的單個狀態屬性。

此外，文檔有點害羞地解釋說您可以使用setup()描述商店的方式來查看商店內的屬性。

更多信息在這里： https ://github.com/vuejs/pinia/discussions/794#discussioncomment-1643242

---

此錯誤也會靜默失敗（或不執行），這無濟於事......

Answer 2

我需要查看我的一個組件中的特定狀態屬性，但我在官方文檔中沒有找到我的用例。 我使用了手表和 storeToRefs 之間的混合來做到這一點。

import { usePlaylistsStore } from '@/stores/playlists'
import { storeToRefs } from 'pinia'
export default {
    name: 'PlaylistDetail',

    setup() {
        const playlistsStore = usePlaylistsStore()
        const { selectedGenres } = storeToRefs(playlistsStore)
        return { selectedGenres }
    },
    watch: {
        selectedGenres(newValue, oldValue) {
            // do something
        }
    }
}