javascript 版本3|Pinia -在可组合函数中监视storeToRefs不起作用

abithluo 于 2023-03-28 发布在 Java

关注(0)|答案(3)|浏览(608)

我试图理解composable的目的。我有一个简单的composable，像这样，并试图从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组件中，同样的事情也会像预期的那样工作。
所以我们不能观察可组合对象中的值？

JavaScript

来源：https://stackoverflow.com/questions/71810522/vue3-pinia-watching-storetorefs-in-composable-function-does-not-work

3条答案

按热度按时间

jchrr9hc1#

我认为你可以在可组合对象中观察值。
但是，要观察pinia状态，它必须在箭头函数中：
watch(() => somePiniaState, (n) => console.log(n, " value changed"));
就像是在观察一个 reactjs 体。
我相信这应该被更好地记录下来。在Pinia文档中我们可以读到如何监视整个商店或如何订阅商店，但不知道如何监视组件或可组合组件中的单个状态属性。
此外，文档在解释您可以使用setup()描述商店的方式来查看商店内的属性时有些害羞。
更多关于这一点：https://github.com/vuejs/pinia/discussions/794#discussioncomment-1643242
此错误也会默默地失败（或不执行），这是没有帮助的...

赞(0）回复(0）举报 2023-03-28

p1iqtdky2#

我需要在我的一个组件中监视一个特定的状态属性，但我在官方文档中没有找到我的用例，我使用了watch和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
        }
    }
}

赞(0）回复(0）举报 2023-03-28

f2uvfpb93#

Vue中的watches默认是shallow watches。为了观察嵌套属性的变化，你必须将watch的deep选项设置为true。

watch(state, (newState, oldState) => {
// do stuff
}, { deep: true})

更多关于此

赞(0）回复(0）举报 2023-03-28

我来回答

javascript 版本3|Pinia -在可组合函数中监视storeToRefs不起作用

3条答案

相关问题

热门标签

最新问答