feat: 完善 doc 例子

@types/index.d.ts

@@ -411,16 +411,19 @@ declare namespace build {
     }
   }
 
+  /**
+   * build 工具
+   */
   namespace utils {
     /**
      * Express 路由 栈管理中心
      */
-    class RouterStackManagement {
+    interface RouterStackManagement {
       /**
        * 热更新 中间件
        * @param middlewares 中间件
        */
-      unpdate: (middlewares: any[]) => void
+      update: (middlewares: any[]) => void
     }
 
     namespace Get {

doc/@types/index.d.ts

@@ -12,7 +12,7 @@ declare namespace Doc {
      * vuex 创建 工具函数
      * * typescript namespace
      */
-    namespace TcreateUtils {
+    namespace createUtils {
       type ActionDescriptor = [any, any]
 
       /**
@@ -35,16 +35,44 @@ declare namespace Doc {
      */
     interface state {
       /**
-       * 是否 使用 移动设备 访问
-       * * 来自服务器端
+       * 全局
        */
-      isMobile: boolean
+      global: {
+        /**
+         * 是否 使用 移动设备 访问
+         * * 来自服务器端
+         * * 这是一个例子
+         */
+        isMobile: boolean
+
+        /**
+         * 是否 使用 移动设备 访问
+         * * 来自 中间件-服务器端
+         * * 这是一个例子
+         */
+        hello: string
+
+        /**
+         * 测试 热加载 vuex
+         * * 来自 客户端
+         * * 这是一个例子
+         */
+        testHotLoadingVuex: number
+
+        /**
+         * 初始化 跳转访问 URL
+         * * 来自服务器端
+         * * 这是一个例子
+         */
+        initialReplaceStateUrl: string
+      }
 
       /**
-       * 初始化 跳转访问 URL
-       * * 来自服务器端
+       * 编辑器
        */
-      initialReplaceStateUrl: string
+      editor: {
+        test: string
+      }
     }
 
     /**
@@ -56,6 +84,8 @@ declare namespace Doc {
        */
       global: {
         SET_IS_MOBILE: boolean
+        SET_HELLO: { hello: string }
+        SET_testHotLoadingVuex: { number: number }
       }
 
       /**

doc/build/webpack.extensions.conf.babel.js

@@ -1,7 +1,7 @@
 export default function(config, { resolve }) {
   return {
     entry: {
-      extensions: resolve('./server/index.js'),
+      extensions: resolve('./server/index.ts'),
     },
     path: config.assetRoot
   }

doc/server/middlewares.ts

@@ -0,0 +1,27 @@
+import { utils } from '@bestminr/build'
+
+/**
+ * 根据路由匹配的页面 中间件
+ */
+const middlewares = [
+  {
+    path: '/',
+    methods: 'GET',
+    handle: (req, res, next) => {
+      req.injectContext = {
+        middlewaresContent: {
+          serverStore: {
+            hello: 'hello word. 这里可用于 使用服务器内存 缓存数据.'
+          },
+        }
+      }
+      console.log('调用了', req.injectContext)
+      next()
+    },
+  },
+]
+
+export function middlewaresExtension(app, routerStackManagement: utils.RouterStackManagement) {
+  routerStackManagement.update(middlewares)
+  console.log('middlewaresExtension init')
+}

doc/server/router.js → doc/server/router.ts

@@ -16,13 +16,13 @@ export function routerExtension(app) {
 
   const router = express.Router()
 
-  //*** 自己编写的-请求中间件
+  // *** 自己编写的-请求中间件
 
   router.get(`/version`, (req, res) => {
     return res.json({ version })
   })
 
-  //*** end 自己编写的-请求中间件
+  // *** end 自己编写的-请求中间件
 
   app.use('/private', router)
   console.log('routerExtension init')

doc/src/entry-server.ts

@@ -19,7 +19,7 @@ function isMobilePageUrl(url) {
 // return a Promise that resolves to the app instance.
 export default context => {
   // hostGlobal.__INJECT_CONTEXT__ = context
-  // console.log('server url = ', context.url, ' server context.renderContext = ', context.renderContext)
+  // console.log('server url = ', context.url, ' server context.injectContext.middlewaresContent = ', context.injectContext.middlewaresContent)
 
   return new Promise((resolve, reject) => {
     const s = !isProduction && Date.now()
@@ -71,7 +71,7 @@ export default context => {
           cookies,
           stage: 'server-onReady',
           matchedComponents,
-        }, context.renderContext)
+        }, context.injectContext.middlewaresContent)
 
         const asyncDataResults = callComponentsHookWith(matchedComponents, 'asyncData', callComponentsHookWithOptions)
         // Call fetchData hooks on components matched by the route.

doc/src/envs.ts

@@ -25,7 +25,7 @@ export interface HostGlobal extends Window {
   /**
    * vuex 实例
    */
-  store: Store<Tstore.state>
+  store: Store<Tstore.state['global']>
 
   /**
    * vue router 实例

doc/src/store/index.ts

@@ -9,12 +9,12 @@ import { Tstore } from '@types'
 
 Vue.use(Vuex)
 
-function isStore(context: any) {
+function isStore(context: Store<any>) {
   return 'strict' in context
 }
 
 export function createStore() {
-  return new Vuex.Store<Tstore.state>({
+  return new Vuex.Store<Tstore.state['global']>({
     state: state(),
     actions,
     mutations,
@@ -23,19 +23,51 @@ export function createStore() {
   })
 }
 
-type createMutationPayloads = { global: any }
+type StoreTypeBounds = { global: any }
 
-function createCommit<MutationPayloads extends createMutationPayloads>() {
-  function commit<K extends keyof MutationPayloads['global']>(
+function createGetState<T extends StoreTypeBounds>() {
+  function getState<K extends keyof T['global']>(
+    context: Store<any>,
+    state: K,
+  ): T['global'][K]
+  function getState<NS extends keyof T, K extends keyof T[NS]>(
+    context: Store<any>,
+    namespace: NS,
+    state: K,
+  ): T[NS][K]
+  function getState(context: Store<any>, ...args: any[]): void {
+    let namespace: string, state: string
+    if (args.length === 2) {
+      namespace = args[0]
+      state = args[1]
+    } else if (args.length === 1) {
+      namespace = 'global'
+      state = args[0]
+    }
+
+    if (namespace !== 'global') {
+      return context.state[namespace][state]
+    }
+    return context.state[state]
+  }
+
+  return getState
+}
+
+export const getState = createGetState<Tstore.state>()
+
+
+function createCommit<T extends StoreTypeBounds>() {
+  function commit<K extends keyof T['global']>(
     context: Store<any>,
     mutation: K,
-    payload: MutationPayloads['global'][K],
+    payload: T['global'][K],
   ): void
-  function commit<NS extends keyof MutationPayloads, K extends keyof MutationPayloads[NS]>(
+  function commit<NS extends keyof T, K extends keyof T[NS]>(
     context: Store<any>,
     namespace: NS,
     mutation: K,
-    payload: MutationPayloads[NS][K],
+    payload: T[NS][K],
   ): void
   function commit(context: Store<any>, ...args: any[]): void {
     let namespace: string, mutation: string, payload: any
@@ -59,6 +91,7 @@ function createCommit<MutationPayloads extends createMutationPayloads>() {
 }
 
 export const commit = createCommit<Tstore.MutationPayloads>()
+
 // const store = this.store
 
 // commit(store, 'SET_IS_MOBILE', false)

doc/src/store/mutations.ts

@@ -1,10 +1,16 @@
 import { Tstore } from "@types"
 
-export const mutations: Tstore.TcreateUtils.ModuleMutations<Tstore.state, Tstore.MutationPayloads['global']> = {
+export const mutations: Tstore.createUtils.ModuleMutations<Tstore.state['global'], Tstore.MutationPayloads['global']> = {
   SET_IS_MOBILE: (state, isMobile) => {
     console.log('SET_IS_MOBILE', isMobile)
     state.isMobile = isMobile
   },
+  SET_HELLO: (state, { hello }) => {
+    state.hello = hello
+  },
+  SET_testHotLoadingVuex: (state, { number }) => {
+    state.testHotLoadingVuex += number * 1
+  },
 }
 
 export default mutations

doc/src/store/state.ts

@@ -1,8 +1,10 @@
 import { Tstore } from '@types'
 
-export default function state(): Tstore.state {
+export default function state(): Tstore.state['global'] {
   return {
     isMobile: false,
+    hello: '',
+    testHotLoadingVuex: 0,
     initialReplaceStateUrl: '',
   }
 }

doc/src/views/index.vue

@@ -1,4 +1,8 @@
 <template>
+<div>
+  <h1>serverStore = {{ hello }}</h1>
+  <button @click="addTestHotLoadingVuex">点击增加 testHotLoadingVuex = {{testHotLoadingVuex}}</button>
+</div>
 </template>
 
 <script lang="ts">
@@ -9,15 +13,40 @@ import { Watch, Prop } from 'vue-property-decorator'
 
 import { Trouter } from '@types'
 
+import { commit, getState } from 'src/store'
+import { isServer } from 'src/envs'
+
 @Component({
   components: {},
 })
 export default class APP extends Vue {
+
+  get hello() {
+    // return ''
+    return getState(this.$store, 'hello')
+  }
+
+  get testHotLoadingVuex() {
+    // return ''
+    return getState(this.$store, 'testHotLoadingVuex')
+  }
+
   static asyncData({ store, serverStore }: Trouter.asyncData.index) {
-    console.log(serverStore)
+    console.log('asyncData', serverStore)
+    if (!isServer) {
+      console.log('static asyncData 在本地也会被执行一般 但是没有中间件提供数据支撑!')
+    }
+    if (serverStore && serverStore.hello) {
+      commit(store, 'SET_HELLO', serverStore)
+    }
   }
+
   mounted() {
     console.log('init Views')
   }
+
+  addTestHotLoadingVuex() {
+    commit(this.$store, 'SET_testHotLoadingVuex', { number: 1 })
+  }
 }
 </script>

doc/tsconfig.json

@@ -24,6 +24,6 @@
     "keyofStringsOnly": true,
     "lib": ["dom", "es5", "es6", "scripthost", "es2018.promise", "webworker"]
   },
-  "include": ["tests", "src", "src/**/*.vue", "@types/*"],
+  "include": ["tests", "src", "server", "src/**/*.vue", "@types/*"],
   "exclude": ["node_modules", "*node_modules*", "dist", "docs", ".tmp", "build"]
 }