Question

几天来，我试图将SSR添加到我的Vue.js网站。设法使身体正常工作，但在预取数据时遇到了问题。基于此：https://ssr.vuejs.org/guide/data.html#data-store我添加了store，我的组件使用store来预取数据以进行渲染：

Item.vue ：

// Server-side only
// This will be called by the server renderer automatically
serverPrefetch () {
    // return the Promise from the action
    // so that the component waits before rendering
    return this.fetchItem(2)
},

// Client-side only
mounted () {
    // If we didn't already do it on the server
    // we fetch the item (will first show the loading text)
    if (!this.item) {
        this.fetchItem(3)
    }
},

methods: {
    fetchItem (param) {
        // return the Promise from the action
        return this.$store.dispatch('fetchItem', param)
    }
}

store.js ：

actions: {
    fetchItem ({ commit }, id) {
        // return the Promise via `store.dispatch()` so that we know
        // when the data has been fetched
        return axios.get('http://localhost:81/api/blah/' + id).then(item => {
                commit('setItem', { id, item });
        })
    }
},

由于没有服务器部分的请求，因此我添加了参数以查看执行哪个参数。从API日志来看，似乎只有一个请求，但总是来自客户端：总是带有参数3。禁用客户端时-服务器部分仍然没有请求。

似乎serverPrefetch（）从未执行过。

有什么想法使它起作用吗？

如何在Vue SSR上预取数据？

0 个答案: