Vue3 Script Setup中Ghost API分页调用内容不刷新问题求助

核心问题分析 #

你的代码里有两个关键错误导致页面不更新：

• posts是普通数组，不是Vue的响应式变量，就算数据更新了也不会触发视图刷新
• 在allposts的then回调里，你用let posts = response声明了一个局部变量，这完全没修改到外部的posts变量，等于白赋值

修正后的代码 #

<script setup>
import GhostContentAPI from '@tryghost/content-api'
import { ref, watch, onMounted } from "vue";

const api = new GhostContentAPI({
  url: 'https://demo.ghost.io',
  key: '22444f78447824223cefc48062',
  version: "v5.0"
});

const pagestart = ref(1);
// 改成响应式变量
const posts = ref([]);

// 优化异步写法，用async/await替代then回调，更清晰
const allposts = async () => { 
  try {
    const response = await api.posts.browse({
      page: pagestart.value,
      limit: "6",
      include: "tags,authors,slug",
    });
    // 直接给响应式变量的value赋值
    posts.value = response;
    console.log(posts.value);
  } catch (err) {
    console.error(err);
  }
};

watch(pagestart, (newValue) => { 
  console.log(newValue); 
  allposts();
}); 

onMounted(() => { allposts(); })
</script>

关键改动说明 #

1. 响应式变量声明：把let posts = []改成const posts = ref([])，这样数据变化时Vue会自动更新视图
2. 正确赋值：去掉then回调里的let，直接给posts.value赋值，确保外部的响应式变量能拿到API返回的数据
3. 异步代码优化：将await和then混用的写法改成纯async/await+try/catch，代码更易读也更规范

这样修改后，页面加载时会自动调用API加载第一页内容，切换页码时pagestart变化会触发watch重新调用allposts，更新posts后视图就会自动刷新了。

内容的提问来源于stack exchange，提问作者Kevin G