关于vue服务端渲染 2 数据预存取

在我看来服务端的主要痛点就是数据的存取,有各种不同的解决方法但是哪一种都感觉不够完美。
这里通过vuex来进行服务端和客户端的数据同步,主要根据是服务端渲染完成之后如果存在store,会在window中插入一个字段来表示，客户端可以通过这个字段来直接加载。

上文里配置router,vuex的配置方式类似

先声明一个vuex的工厂函数

import Vue from 'vue'
import Vuex from 'vuex'
import {itemApi} from './api' //忽略实现细节,请求数据并返回一个promise
Vue.use(Vuex)
export function createStore(){
   
    return new Vuex.Store({

        state:{
  items:{}}
        mutations:{
            addItem(state,{id,item}){
                Vue.set(state.items,id,item)
            }
        },
        actions:{
            fetchItem({commit},id){
                //store.dispatch需要返回一个Promise来判断数据请求情况                
                return itemApi(id).then(item=>{
                    commit('addItem',{id,item})
                })
            }
        }
    })
}

在main里面加入vuex

import Vue from 'vue'
import {createRouter} from '@/router'
import {createStore} from '@/store'
import {sync} from 'vuex-router-sync' //新增的工具包，需要npm install安装，用来同步store和router
import App from '@/App' //根组件

export default ()=>{
  const router=createRouter()
  const store=createStore()
  sync(store,router)
  const app=new Vue({
    router,
    store,
    render:h=>h(App)
  })
  return {app,router,store}