Question

我正在通过Quasar与Vue合作，通过SSR呈现页面。这足够好，但是我的组件似乎运行不正常。

问题是内容已在服务器端正确呈现（通过检查Chrome中的网络日志进行了验证），axios调用使用DECLARE @DateStart DATE DECLARE @DateEnd DATE DECLARE @LableRange varchar(max) SELECT DATEPART(WEEKDAY, GETDATE()) --Sun=1, Mon=2, ... IF DATEPART(WEEKDAY, GETDATE()) = 2 BEGIN SET @DateStart = DATEADD (DAY, -5,GETDATE()) SET @DateEnd = DATEADD (DAY, -2,GETDATE()) SET @LableRange = CONCAT(FORMAT(@DateStart, 'yyyy-MM-dd'), ', ' , FORMAT(DATEADD(day,1,@DateStart), 'yyyy-MM-dd'), ', ' , FORMAT(DATEADD(day,2,@DateStart), 'yyyy-MM-dd')) -- or maybe this format is better --SET @LableRange = CONCAT('BETWEEN ' --, FORMAT(@DateStart, 'yyyy-MM-dd'), ' AND ' --, FORMAT(DATEADD(day,2,@DateStart), 'yyyy-MM-dd')) END ELSE BEGIN SET @DateStart = DATEADD (DAY, -1,GETDATE()) SET @DateEnd = GETDATE() SET @LableRange = FORMAT(@DateStart, 'yyyy-MM-dd') END SELECT @LableRange SELECT * FROM SomeTable as T WHERE T.TestDate < @DateEnd AND T.TestDate >= @DateStart将数据加载到元素中，但是当我们到达使用检查器中的“元素”选项卡时，浏览器的状态似乎已重置，并且服务器端呈现的内容丢失了。

有什么想法吗？

Vue组件如下：

v-html

请注意，我确实尝试将<template> <div class="dy-svg" v-html="svgData"></div> </template> <script> /** * This provides a way of loading an SVG and embedding it straight into * the page, so that it can have css applied to it. Note, since we are * using XHR to load the SVG, any non-local resource will have to deal * with CORS. */ import axios from 'axios'; export default { props: { src: String, prefetch: { type: Boolean, default: true } }, data() { return { svgData: undefined, }; }, async serverPrefetch() { if (this.prefetch) { await this.loadImage(); } }, async mounted() { // if (!this.svgData) { // await this.loadImage(); // } }, methods: { async loadImage() { try { let url = this.src; if (url && url.startsWith('/')) { url = this.$appConfig.baseUrl + url; } const response = await axios.get(url); let data = response.data; const idx = data.indexOf('<svg'); if (idx > -1) { data = data.substring(idx, data.length); } this.svgData = data; } catch (error) { console.error(error); } } } }; </script>属性添加到div中，但这似乎没有影响。

环境：

类星体1.1.0
@ quasar / cli 1.0.0
@ quasar / app 1.0.6
NodeJS 10.15.3
Vue 2.6.10（通过Quasar进行依赖）

Answer 1

提取的数据需要驻留在视图组件外部，专用数据存储中或“状态容器”中。在服务器上，您应在渲染时预取数据并将其填充到存储中。为此，您可以使用Vuex。

示例Vuex存储文件：

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
// import example from './module-example'

Vue.use(Vuex)

export default function ( /* { ssrContext } */ ) {
  const Store = new Vuex.Store({
    state: () => ({
      entities: {}
    }),
    actions: {
      async get({
        commit
      }) {
        await axios.get('https://example.com/api/items')
          .then((res) => {
            if (res.status === 200) {
              commit('set', res.data.data)
            }
          })
      }
    },

    mutations: {
      set(state, entities) {
        state.entities = entities
      },
    },

    modules: {},

    // enable strict mode (adds overhead!)
    // for dev mode only
    strict: process.env.DEV
  })

  return Store
}

Vue页面脚本示例：

export default {
  name: 'PageIndex',

  computed: {
    // display the item from store state.
    entities: {
      get() {
        return this.$store.state.entities
      }
    }
  },

  serverPrefetch() {
    return this.fetchItem()
  },

  mounted() {
    if (!this.entities) {
      this.fetchItem()
    }
  },

  methods: {
    fetchItem() {
      return this.$store.dispatch('get')
    }

  }
}

这应该可以解决您面临的问题。

使用SSR时，在客户端上的serverPrefetch之后修改Vue内容

1 个答案: