编写通用性代码

一套代码，两套执行环境

在vue的生命周期函数中，只有beforeCreate和created会在ssr过程中执行，其他的生命周期函数只会在客户端执行。所以应该避免在这两个生命周期函数中产生全局副作用的代码，比如定时器。同时，由于前端代码会在后端中执行，而Node.js和浏览器JavaScript有区别，导致在前端视图中的部分JavaScript属性或方法在执行时会报错。比如在使用一些插件的时候会提示window或document是undefined，在这种情况下，可以用vue-no-ssr让相关组件不走ssr

数据预获取方式

使用asyncData 静态方法

<template>
    <div>
        {{ userInfo.username }}
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
    name: 'Home',
    // 组件实例化前无法访问this，所以需要将store和路由信息作为参数传递进去
    asyncData({ store, router }) {
        return store.dispatch('user/getInfo')
    },
    computed: {
        ...mapGetters(['userInfo'])
    }
}
</script>

client端获取数据方式

<script>
import API from '@/api'
export default {
......
  methods: {
    getData(){
        try{
            const data = await API(this.$store.$http).getJobSummary()
            ......
        } catch(err=>{
                ......
        })
    }
  }
......    
}
</script>