feat(测试): 添加测试例子,完善vuex的类型

Author: 白唯

@types/index.d.ts

@@ -11,7 +11,7 @@ export declare interface StoreInstance extends ReturnType<typeof createStore> {
 type ModuleType = { app: AppStateType }
 
 // 所有的SateType
-export type StateType = { state: ModuleType & RootStateType & StoreInstance }
+export type StateType = ModuleType & RootStateType & StoreInstance
 
 // request interceptors
 export declare interface ApiResponse {

README.md

@@ -13,6 +13,7 @@
 - webpack 插件:style-resources-loader
 
 #### 代码基础架构说明
+
 ```
 |-- 根目录
     |-- @types 项目共用的 type
@@ -76,6 +77,7 @@
     |-- typedoc.json 文档配置文件
     |-- vue.config.js <font color="red">vue-cli 脚手架配置文件</font>
 ```
+
 #### 组件编写
 
 - [x] 支持 tsx 方式编写页面,在.tsx 文件或者 class-component 里写 tsx.

directoryList.md

@@ -1,12 +1,13 @@
 import { StateType } from '@types'
 import { Message } from 'ant-design-vue/types/message'
 import { Router, RouteLocationNormalizedLoaded } from 'vue-router'
+import { Store } from 'vuex'
 
 /** 将第三方变量挂载到每一个 vue 示例中  */
 declare module '@vue/runtime-core' {
   interface ComponentCustomProperties {
     $message: Message
-    $store: StateType
+    $store: Store<StateType>
     $route: RouteLocationNormalizedLoaded
     $router: Router
   }

global.d.ts

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <full-loading :show="fullLoading" text="hehhe" />
+    <full-loading :show="fullLoading" :text="loadingText" />
     <div id="nav">
       <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> | <router-link to="/contact">Contact</router-link> |
       <router-link to="/tests">组件测试</router-link>
@@ -19,12 +19,12 @@ const App = defineComponent({
       hello: 'iis'
     }
   },
-  created() {
-    console.log(this.$store)
-  },
   computed: {
     fullLoading() {
       return this.$store.state.fullLoading
+    },
+    loadingText() {
+      return this.$store.state.loadingText
     }
   }
 })

src/App.vue

@@ -1,8 +1,9 @@
-import { Button, Card, Row, Col } from 'ant-design-vue'
+import { Button, Card, Row, Col, Tag, Form, Input } from 'ant-design-vue'
 import { createApp } from 'vue'
 
 /**
  * @description 手动注册 antd-vue 组件,达到按需加载目的
+ * @description Automatically register components under Button, such as Button.Group
  * @param {ReturnType<typeof createApp>} app  整个应用的实例
  * @returns void
  */
@@ -11,6 +12,7 @@ export function loadAtdComponent(app: ReturnType<typeof createApp>) {
   app.use(Card)
   app.use(Row)
   app.use(Col)
+  app.use(Tag)
+  app.use(Form)
+  app.use(Input)
 }
-
-/* Automatically register components under Button, such as Button.Group */

src/plugins/antd.ts

@@ -10,7 +10,7 @@ const store: StoreInstance = createStore({
   state: state,
   mutations,
   actions: {},
-  ...modules,
+  modules: { ...modules },
   plugins: [
     createPersistedState({
       paths: ['app']

src/store/index.ts

@@ -1,9 +1,8 @@
-const state: RootStateType = {
-  fullLoading: false
+const state = {
+  fullLoading: false,
+  loadingText: 'Loading...'
 }
 
-type RootStateType = {
-  fullLoading: boolean
-}
+type RootStateType = typeof state
 
 export { state, RootStateType }

src/store/state.ts

@@ -1,15 +1,55 @@
 <template>
   <div>
     <a-card class="card">
+      <full-loading :show="loading" :text="loadingText" />
       <p>全局组件测试</p>
       <a-row>
-        <a-col :span="12"> <a-button @click="openFullLoading">全局加载 3 秒</a-button> </a-col>
-        <a-col :span="12"> <a-button @click="openFullLoading">局部加载 </a-button> </a-col>
+        <a-col :span="12"> <a-button type="primary" @click="openFullLoading">全局加载 3 秒</a-button> </a-col>
+        <a-col :span="12"> <a-button @click="openPartLoading">局部加载 </a-button> </a-col>
       </a-row>
     </a-card>
 
     <a-card class="card">
       <p>vuex测试</p>
+      <a-row>
+        <a-col :span="12">
+          <p>app模块</p>
+          <p>
+            <a-tag v-for="(item, key, index) of app" :key="index" color="pink">{{ `${key}:${item}` }}</a-tag>
+          </p>
+
+          <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
+            <a-form-item label="更改主题名">
+              <a-row>
+                <a-col :span="18">
+                  <a-input v-model:value="inputValue" />
+                </a-col>
+                <a-col :span="6">
+                  <a-button type="success" @click="changeTheme">确认</a-button>
+                </a-col>
+              </a-row>
+            </a-form-item>
+          </a-form>
+        </a-col>
+        <a-col :span="12">
+          <p>根模块</p>
+          <p>
+            <a-tag color="pink">{{ `loadingText:${loadingText}` }}</a-tag>
+          </p>
+          <a-form :label-col="{ span: 6 }" :wrapper-col="wrapperCol">
+            <a-form-item label="全局加载文字">
+              <a-row>
+                <a-col :span="16">
+                  <a-input v-model:value="globalLoadingText" />
+                </a-col>
+                <a-col offset="2" :span="6">
+                  <a-button type="success" @click="changeText">更改并打开</a-button>
+                </a-col>
+              </a-row>
+            </a-form-item>
+          </a-form>
+        </a-col>
+      </a-row>
     </a-card>
   </div>
 </template>
@@ -18,8 +58,49 @@
 import { defineComponent } from 'vue'
 
 export default defineComponent({
+  data() {
+    return {
+      labelCol: { span: 4 },
+      wrapperCol: { span: 14 },
+      loading: false,
+      inputValue: '',
+      globalLoadingText: ''
+    }
+  },
+  created() {
+    console.log(this.app)
+  },
+  computed: {
+    app() {
+      return this.$store.state.app
+    },
+    loadingText() {
+      return this.$store.state.loadingText
+    }
+  },
   methods: {
+    /**
+     * @description 更改 vuex 主题名
+     */
+    changeTheme() {
+      console.log(this.inputValue)
+      this.$store.__s('app.theme', this.inputValue)
+    },
+    changeText() {
+      this.$store.__s('loadingText', this.globalLoadingText)
+      this.$store.__s('fullLoading', true)
+      setTimeout(() => {
+        this.$store.__s('fullLoading', false)
+      }, 3000)
+    },
+    openPartLoading() {
+      this.loading = true
+      setTimeout(() => {
+        this.loading = false
+      }, 3000)
+    },
     openFullLoading() {
+      this.$store.__s('loadingText', '全局加载中')
       this.$store.__s('fullLoading', true)
       setTimeout(() => {
         this.$store.__s('fullLoading', false)
@@ -32,5 +113,6 @@ export default defineComponent({
 <style lang="less" scoped>
 .card {
   margin-top: 30px;
+  position: relative;
 }
 </style>