vue服务端渲染axios预取数据

首先是要参考vue服务端渲染教程：https://ssr.vuejs.org/zh/data.html。

本文主要代码均参考教程得来。基本原理如下，拷贝的原文教程。

为了解决这个问题，获取的数据需要位于视图组件之外，即放置在专门的数据预取存储容器(data store)或"状态容器(state container)）"中。首先，在服务器端，我们可以在渲染之前预取数据，并将数据填充到 store 中。此外，我们将在 HTML 中序列化(serialize)和内联预置(inline)状态。这样，在挂载(mount)到客户端应用程序之前，可以直接从 store 获取到内联预置(inline)状态。

依据这段话，需要使用vuex；使用vuex的代码如下：

 import Vue from 'vue'
 import Vuex from 'vuex'
 Vue.use(Vuex)
 // 假定我们有一个可以返回 Promise 的
 // 通用 API（请忽略此 API 具体实现细节）
 import { fetchItem } from '../api'
 export function createStore () {
   return new Vuex.Store({
     state: {
       items: {}
     },
     actions: {
       fetchItem ({ commit }, id) {
         // `store.dispatch()` 会返回 Promise，
         // 以便我们能够知道数据在何时更新
         return fetchItem(id).then(item => {

           commit('setItem', { id, item })
         })
       }
     },
     mutations: {
       setItem (state, { id, item }) {
         Vue.set(state.items, id, item)
       }
     }
   })
 }

上面的api中代码：

 import api from "create-api"
 export function fetchItem(id) {

   return new Promise(function(resolve, reject) {
     api.get("http://www.youxuewang.com.cn/shouji/home/LoadProducts", {
       pageno: ,
       pagesize: ,
       condstr: '社会大课堂:0'
     }).then(function(res) {
       resolve({ text: JSON.stringify(res)});

     }).catch(function() {
       console.log();
     });
   })

   //return Promise.resolve(obj)
 }

create-api是webpack的别名也就是alias配置，实际是两个文件，服务端文件如下

 const isProd = process.env.NODE_ENV === 'production';

 const axios = require('axios');
 let host = isProd ? 'http://www.youxuewang.com.cn/shouji/home/LoadProducts' : 'http://www.youxuewang.com.cn/shouji/home/LoadProducts';
 let cook = process.__COOKIE__ || '';
 let api;

 axios.defaults.baseURL = host;
 axios.defaults.timeout = ;

 axios.interceptors.response.use((res) => {
   if (res.status >=  && res.status < ) {
     console.log(,res.status );
     return res;
   }
   return Promise.reject(res);
 }, (error) => {
   // 网络异常
   return Promise.reject({message: '网络异常，请刷新重试', err: error, type: });
 });

 if (process.__API__) {
   api = process.__API__;
 } else {
   api = {
     get: function(target, options = {}) {
       return new Promise((resolve, reject) => {
         axios.request({
           url: target,
           method: 'get',
           headers: {
             'Cookie': cook
           },
           params: options
         }).then(res => {
           resolve(res.data);
         }).catch((error) => {
           reject(error);
         });
       });
     },
     post: function(target, options = {}) {
       return new Promise((resolve, reject) => {
         axios.request({
           url: target,
           method: 'post',
           headers: {
             'Cookie': cook
           },
           params: options
         }).then(res => {
           resolve(res.data);
         }).catch((error) => {
           reject(error);
         });
       });
     }
   };
 }

 module.exports = api;

客户端用代码如下

 const axios = require('axios');
 let api;

 axios.defaults.timeout = ;

 //拦截器，使用拦截器提前对axios操控，before they are handled by then or catch.
 axios.interceptors.response.use((res) => {
   if (res.status >=  && res.status < ) {
     console.log(,res.status );
     return res;
   }
   return Promise.reject(res);
 }, (error) => {
   // 网络异常
   return Promise.reject({message: '网络异常，请刷新重试', err: error});
 });

 if (process.__API__) {
   api = process.__API__;
 } else {
   api = {
     get: function(target, params = {}) {
       const suffix = Object.keys(params).map(name => {
         return `${name}=${JSON.stringify(params[name])}`;
       }).join('&');
       const urls = `${target}?${suffix}`;
       return new Promise((resolve, reject) => {
         axios.get(urls, params).then(res => {
           resolve(res.data);
         }).catch((error) => {
           reject(error);
         });
       });
     },
     post: function(target, options = {}) {
       return new Promise((resolve, reject) => {
         axios.post(target, options).then(res => {
           resolve(res.data);
         }).catch((error) => {
           reject(error);
         });
       });
     }
   };
 }

 module.exports = api;

那么，我们在哪里放置「dispatch 数据预取 action」的代码？

我们需要通过访问路由，来决定获取哪部分数据 - 这也决定了哪些组件需要渲染。事实上，给定路由所需的数据，也是在该路由上渲染组件时所需的数据。所以在路由组件中放置数据预取逻辑，是很自然的事情。

我们将在路由组件上暴露出一个自定义静态函数 asyncData。注意，由于此函数会在组件实例化之前调用，所以它无法访问 this。需要将 store 和路由信息作为参数传递进去。

上面这句话，诞生了服务端渲染数据的路由组件有一个asyncData方法，代码如下


 <template>
   <div>{{ item.text }}---{{fooCount}}</div>
 </template>
 <script>
 // 在这里导入模块，而不是在 `store/index.js` 中
 import fooStoreModule from '../store/modules/foo'
 export default {
   asyncData ({ store,route}) {
     store.registerModule('foo', fooStoreModule)
     //return store.dispatch('foo/inc')
     return Promise.all([
         store.dispatch("fetchItem",route.params.id),
         store.dispatch('foo/inc')
       ])
   },
   // 重要信息：当多次访问路由时，
   // 避免在客户端重复注册模块。
   destroyed () {
     this.$store.unregisterModule('foo')
   },
   computed: {
     fooCount () {
       return this.$store.state.foo.count
     },item () {
       return this.$store.state.items[this.$route.params.id]
     }
   }
 }
 </script> 

主要代码介绍如上，完成代码github链接：https://github.com/mstzhen/vue-ssr-axios。

预取数据演示访问地址：http://localhost:8080/item/22；

本文结束。