第三步官方思路有什么缺点吗？我认为是有的：对老项目来说，改造成本比较大。需要显式的引入 vuex，就得走 action、mutations 那一套，无论是代码改动量还是新人学习成本，都不低。
有什么办法能减少对旧有前端渲染项目的改动量的吗？我是这么做的。
// store.js
// action，mutations 那些都不需要了，只定义一个空 state
export default function createStore() {
return new Vuex.Store({
state: {}
})
}
// Bar.vue
// tagName 是组件实例的名字，比如 bar1、bar2、foo1 等，由 entry-server.js 注入
export default {
prefetchData: function (tagName) {
return new Promise((resolve, reject) => {
resolve({
tagName,
data: 'Bar ajax 数据'
});
})
}
}
// entry-server.js
return Promise.all(prefetchFns).then((res) => {
// 拿到 Ajax 数据之后，手动将数据写入 state，不通过 action，mutation 那一套
// state 内部区分的 key 值就是 tagName，比如 bar1、bar2、foo1 等
res.forEach((item, key) => {
Vue.set(store.state, `${item.tagName}`, item.data);
});
context.state = store.state;
return app;
});
// ssrmixin.js
// 将每个组件都需要的 computed 抽象成一个 mixin，然后注入
export default {
computed: {
prefetchData () {
let componentTag = this.$options._componentTag; // bar1、bar2、foo1
return this.$store.state[componentTag];
}
}
}
至此，我们就便得到了 Vue SSR 的一种变形。对于组件开发者而言，只需要把原来的 this.fetchData 方法抽象到 prefetchData 方法，然后就可以在 DOM 中使用 {{prefetchData}} 拿到到数据了。这部分的代码请参考这里。
总结
Vue SSR 确实是个有趣的东西，关键在于灵活运用。此 Demo 还有一个遗留问题没有解决：当把 Ajax 抽象到 prefetchData，做成 SSR 之后，原先的前端渲染就失效了。能不能同一份代码同时支持前端渲染和后端渲染呢？这样当后端渲染出问题的时候，我就可以随时切回前端渲染，便有了兜底的方案。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持黑区网络。