feat: [doc] 获取 服务器消息的例子

doc/@types/index.d.ts

@@ -19,6 +19,13 @@ declare namespace Doc {
      * vuex state
      */
     interface state {
+      /**
+       * 当前服务器版本
+       * * 来自服务器端
+       * * 这是一个例子
+       */
+      version: string
+
       /**
        * 是否 使用 移动设备 访问
        * * 来自服务器端

doc/src/store/actions.ts

@@ -1,6 +1,16 @@
 import { globalHelper } from 'src/store/helpers'
 import { Tstore } from '@types'
 
+import axios from 'axios'
+import { isServer, injectGlobal } from 'src/envs'
+import { commit, getState } from 'src/store'
+
+function get(url: string) {
+  if (isServer) url = `${injectGlobal.__INJECT_CONTEXT__.SERVER_HOST}${url}`
+  console.log('axios 发起请求:', url)
+  return axios.get(url)
+}
+
 export const actions = globalHelper.makeActions({
   GET_SERVER_DATA(ctx, { id }: { id: number }) {
     let resove
@@ -11,6 +21,19 @@ export const actions = globalHelper.makeActions({
       })
     }, 1000)
     return promise
+  },
+  GET_SERVER_VERSION(ctx) {
+    const version = getState(ctx, 'version')
+    if (version) {
+      console.log('version 已经被请求过了')
+      return
+    }
+
+    return get('/private/version').then(({ data }) => {
+      const version = data.version.join('.')
+      console.log('axios 获取当前版本号:', version)
+      commit(ctx, 'SET_VERSION', { version })
+    })
   }
 })
 

doc/src/store/mutations.ts

@@ -12,6 +12,9 @@ export const mutations = globalHelper.makeMutations({
   SET_testHotLoadingVuex: (state, { number }: { number: number }) => {
     state.testHotLoadingVuex += number * 1
   },
+  SET_VERSION: (state, { version }: Pick<Tstore.state, 'version'>) => {
+    state.version = version
+  },
 })
 
 export default mutations

doc/src/store/state.ts

@@ -3,6 +3,7 @@ import { Tstore } from '@types'
 export default function state(): Tstore.state {
   return {
     isMobile: false,
+    version: '',
     hello: '',
     testHotLoadingVuex: 0,
     initialReplaceStateUrl: '',

doc/src/views/index.vue

@@ -1,5 +1,6 @@
 <template>
 <div>
+  <h1>当前服务器版本为: {{ version }}</h1>
   <h1>serverStore = {{ hello }}</h1>
   <button @click="addTestHotLoadingVuex">点击增加 testHotLoadingVuex = {{testHotLoadingVuex}}</button>
 </div>
@@ -10,7 +11,7 @@ import { value, computed, watch, onMounted } from 'vue-function-api'
 
 import { Trouter } from '@types'
 
-import { commit, getState } from 'src/store'
+import { commit, getState, dispatch } from 'src/store'
 import { isServer, hostGlobal } from 'src/envs'
 
 type AsyncData = Trouter.asyncData.app
@@ -26,9 +27,13 @@ export default {
     if (serverStore && serverStore.hello) {
       commit(store, 'SET_HELLO', serverStore)
     }
+    return Promise.all([
+      dispatch(store, 'GET_SERVER_VERSION', undefined)
+    ])
   },
   setup(props, context) {
     const hello = computed(() => getState(hostGlobal.store, 'hello'))
+    const version = computed(() => getState(hostGlobal.store, 'version'))
     const testHotLoadingVuex = computed(() => getState(hostGlobal.store, 'testHotLoadingVuex'))
 
     onMounted(() => {
@@ -37,6 +42,7 @@ export default {
 
     return {
       hello,
+      version,
       testHotLoadingVuex,
       addTestHotLoadingVuex() {
         commit(hostGlobal.store, 'SET_testHotLoadingVuex', { number: 1 })