Vue3 | Pinia - 在可组合函数中观看 storeToRefs 不起作用

Question

我试图理解可组合项的目的。我有一个像这样的简单可组合项，并试图从 Pinia 商店观看watch不触发的状态：

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 来做到这一点。

// Option API
<script>
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
        }
    }
}
</script>

// Composition API
<script setup>
import { usePlaylistsStore } from '@/stores/playlists'
import { storeToRefs } from 'pinia'
import { computed, watch } from 'vue'

const playlistsStore = usePlaylistsStore()
const { selectedGenres } = storeToRefs(playlistsStore)

watch(() => selectedGenres, (newValue, oldValue) => {
    // do something
})
</script>