import { VuexModule, Module, Mutation } from "vuex-module-decorators";
import store from "@/store";

export interface IServerState {
  data: {};
}
@Module({ store, name: "serverState" })
export default class extends VuexModule implements IServerState {
  data: Record<string, any> = {};//用于存储所有服务端数据
  @Mutation
  handleSetValue({ key, value }: { key: string; value: any }) {
    this.data[key] = value;
  }
}

import Vue from 'vue'
import Vuex from 'vuex'
import serverStateModule from './modules/serverState'
Vue.use(Vuex)

export interface IRootState {
}

const store = new Vuex.Store<IRootState>({
  modules:{
    serverStateModule//注册模块
  }
})

export default store

import Vue from 'vue'
import App from './App.vue'
import { createRouter } from './router'
import store from './store'

export function createApp(ctx: any) {
  const router: any = createRouter(ctx ? ctx.cookies : '')
  // sync(store, router)
  const app = new Vue({
    router,
    store,
    render: h => h(App)
  })
  return { app, router, store }
}

// promise.finally Polyfill
if (!Promise.prototype.finally) {
  const P: any = Promise
  P.prototype.finally = function (callback: Function) {
    const P: any = this.constructor
    return this.then(
      (value: any) => P.resolve(callback()).then(() => value),
      (reason: any) =>
        P.resolve(callback()).then(() => {
          throw reason
        })
    )
  }
}

import {
  createApp
} from './main'
export default context => {
  return new Promise((resolve, reject) => {
    const beginTime = Date.now()
    const {
      app,
      router,
      store
    } = createApp(context)
    // set router's location
    router.push(context.url)
    router.onReady(() => {
      // This `rendered` hook is called when the app has finished rendering
      context.rendered = () => {
        // After the app is rendered, our store is now
        // filled with the state from our components.
        // When we attach the state to the context, and the `template` option
        // is used for the renderer, the state will automatically be
        // serialized and injected into the HTML as `window.__INITIAL_STATE__`.
        context.state = store.state //必须
      }
      resolve(app)
    }, reject)
  })
}

import {
  createApp
} from './main'
const {
  app,
  router,
  store
} = createApp()
//必须
if (window.__INITIAL_STATE__) {
  store.replaceState(window.__INITIAL_STATE__)
}
router.onReady(() => {
  app.$mount('#app')
})

<template><div>{{bannerList}}</div></template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { getModule } from 'vuex-module-decorators'
import serverStateModule from '@/store/modules/serverState'
@Component({
  name: 'Home',
  mixins: [],
  filters: {},
  data() {
    return {}
  },
  components: {},
})
export default class Home extends Vue {
  created() {
  }
  get bannerList() {
    return this.$store.state.serverStateModule &&
      this.$store.state.serverStateModule.data.bannerList
      ? this.$store.state.serverStateModule.data.bannerList
      : []
  }
  async mounted() {
    //预防万一服务端没有数据可以在客户端再次请求
    if (this.bannerList.length <= 0) {
      const bannerList = await this.getBannerList()
      this.$store.commit('handleSetValue', {
        value: bannerList,
        key: 'bannerList',
      })
    }
  }
  async getBannerList(): Promise<any> {
    return this.getAjaxData()//这里逻辑自行实现
  }
  async serverPrefetch() {
    const bannerList = await this.getBannerList()
    const serverStateModuleInstance = getModule(serverStateModule, this.$store)
    // 使用模块进行赋值操作
    serverStateModuleInstance.handleSetValue({
      value: bannerList,
      key: 'bannerList',
    })
  }
}
</script>