如何使用组合 api 在 Nuxt js 中获取状态？

Question

setup(){
const columns = computed(()=>store.state['subCategory'].subCategoryColumnsData[subCategoryName.value]);

const { fetch } = useFetch(async () => {
     
     await store.dispatch('subCategory/getColumnsQuery', { 
          categories: subCategoryId.value,
          page: 1, 
          subCategoryName: subCategoryName.value, 
        }) 
    });

fetch();
}

我想在我的项目中的页面之间切换。每当我切换另一个页面时，我都会发送请求以获取最新更新的数据。此代码在第一次加载页面时运行良好，但当我从一个页面切换到另一个页面时它不起作用。但是，如果我检查商店状态，我可以在商店中看到它。如果我第二次访问同一个页面，我这次可以看到数据。

但是如果我像这样更改我的代码，它会很好地工作。我不明白为什么它在第一个示例中不起作用

setup(){
const columns = ref([]) 

const { fetch } = useFetch(async () => {
     
     await store.dispatch('subCategory/getColumnsQuery', { 
          categories: subCategoryId.value,
          page: 1, 
          subCategoryName: subCategoryName.value, 
        }) 
    }).then(() => (columns.value = store.state['subCategory'].subCategoryColumnsData[subCategoryName.value]));

fetch();
}

Answer 1

你能测试一下吗？示例：

const state = reactive({ columns: computed(() => yourstore })
// do not need to call fetch because this hook is a function
useFetch(async () => { await store.dispatch(url) })
return {
  ...toRefs(state),
}