Nuxt 组合 API，更新"状态"，未反映在 UI 模板上

Question

我有一个使用选项API的next .js应用程序。和新Nuxt3出来,我想事情迁移到所谓"更好"的选择。到目前为止，我遇到的只有挑战，也许那是我知识的缺乏。

我正在用

组件构建一个基本的电子商务平台

# products/_id.vue
<template>
<div>
{{ product }}
</div>
</template>
<script>
import {
defineComponent,
useFetch,
useStore,
useRoute,
ssrRef, reactive, watch
} from '@nuxtjs/composition-api'
export default defineComponent({
setup () {
const store = useStore()
const route = useRoute()
const loading = ref(false)
// LOAD PRODUCT FROM VUEX STORE IF ALREADY LOADED
const product = reactive(store.getters['products/loaded'](route.value.params.id))
// GET PAGE CONTENT
const { fetch } = useFetch(async () => {
loading.value = true
await store.dispatch('products/getOne', route.value.params.id)
loading.value = false
})
// WATCH, if a use navigates to another product, we need to watch for changes to reload
watch(route, () => {
if (route.value.params.id) {
fetch()
}
})
return {
loading
product
}
}
})
</script>

我需要注意的一件事是，如果产品获得评论/评级，我希望UI更新产品星级评级，因此需要更多的反应性。

我继续得到undefined积var

在我的VueX商店中，我有我的getter

loaded: state => (id) => {
try {
if (id) {
return state.loaded[id]
}
return state.loaded
} catch {
return {}
}
}

寻找关于如何让这个工作的方向，改进我目前设置的任何代码。

Answer 1

如果你想维持活性referece吸气,然后你必须创建一个计算财产。

那么你从setup函数返回的是

product: computed(() => getters['products/loaded'](route.value.params.id))

这将确保无论何时getter更新，你的组件都会收到更新。

,如果产品已经存在,你应该救助fetch函数。这样你就不用调用额外的API了。

最后，如果出现错误，您可以重定向到404错误页面。

总而言之，你的setup函数看起来像这样

setup() {
const route = useRoute();
const { error } = useContext();
const { getters, dispatch } = useStore();
const loading = ref(false);
const alreadyExistingProduct = getters['products/loaded'](route.value.params.id);
const { fetch } = useFetch(async () => {
// NEW: bail if we already have the product
if (alreadyExistingProduct) return;
try {
loading.value = true;
await dispatch('products/getOne', route.value.params.id);
} catch {
// NEW: redirect to error page if product could not be loaded
error({ statusCode: 404 });
} finally {
loading.value = false;
}
});
watch(route, () => {
if (route.value.params.id) {
fetch();
}
});
return {
loading,
// NEW: computed property to maintain reactive reference to getter
product: computed(() => getters['products/loaded'](route.value.params.id)),
};
},

你可能也会遇到这个无害的问题，供参考。