1

2025-10-08 19:20:24 +08:00
parent 845658f193
commit 7e888970d3
11 changed files with 1726 additions and 68 deletions
--- a/demo-project/Vuex错误修复说明.md
+++ b/demo-project/Vuex错误修复说明.md
@@ -0,0 +1,399 @@
+# Vuex 错误修复说明
+
+## 🔍 问题描述
+
+控制台出现多个 Vuex 相关错误：
+
+1. `[vuex] unknown action type: getSysTitle`
+2. `[vuex] unknown getter: isServerRun`
+3. `[vuex] unknown getter: infoMsg`
+4. `Unknown custom element: <asyncModal>`
+
+## 📝 修复内容
+
+### 1. 修复 `getSysTitle` action 错误
+
+**问题位置**：`src/components/main/main.vue`
+
+**错误原因**：
+- 在 `created` 钩子中调用了 `this.$store.dispatch('getSysTitle')`
+- 缺少模块命名空间前缀 `app/`
+- 且在 `demo-project/src/main.js` 中已经调用过，不需要重复调用
+
+**修改前**：
+```javascript
+created() {
+  this.init()
+},
+methods: {
+  async init() {
+    await this.$store.dispatch('getSysTitle')  // ❌ 错误
+  },
+}
+```
+
+**修改后**：
+```javascript
+created() {
+  this.init()
+},
+methods: {
+  async init() {
+    // 获取系统标题（已在 main.js 中调用，这里不需要重复调用）
+    // await this.$store.dispatch('app/getSysTitle')
+  },
+}
+```
+
+**说明**：
+- ✅ 移除了重复的 `getSysTitle` 调用
+- ✅ 系统标题在 `demo-project/src/main.js` 的 `mounted` 钩子中统一获取
+- ✅ 避免了重复请求
+
+### 2. 修复 `isServerRun` getter 错误
+
+**问题位置**：`src/components/main/components/terminal/index.vue`
+
+**错误原因**：
+- 使用了不存在的 `isServerRun` getter
+- 这是 Terminal 功能相关的状态，但 store 中没有定义
+
+**修改前**：
+```javascript
+computed: {
+  ...mapGetters({
+    isServerRun: 'isServerRun'  // ❌ 不存在的 getter
+  }),
+  iconclass() {
+    let curClass = 'terminal-icon ml10 '
+    if (this.isServerRun) {
+      curClass += ' run'
+    }
+    return curClass
+  }
+},
+```
+
+**修改后**：
+```javascript
+computed: {
+  iconclass() {
+    let curClass = 'terminal-icon ml10'
+    // Terminal 功能暂时禁用
+    // if (this.isServerRun) {
+    //   curClass += ' run'
+    // }
+    return curClass
+  }
+},
+```
+
+**说明**：
+- ✅ 移除了对不存在的 `isServerRun` getter 的依赖
+- ✅ Terminal 功能暂时禁用
+- ✅ 如果需要启用，需要在 store 中添加相应的 state 和 getter
+
+### 3. 修复 `infoMsg` getter 错误
+
+**问题位置**：`src/components/main/components/terminal/terminal.vue`
+
+**错误原因**：
+- 使用了不存在的 `infoMsg` getter
+- 调用了不存在的 `clearInfoMsg` mutation 和 `setInteverLog` action
+
+**修改前**：
+```javascript
+computed: {
+  ...mapGetters({
+    infoMsg: 'infoMsg'  // ❌ 不存在的 getter
+  })
+},
+methods: {
+  clearLog() {
+    this.$store.commit('clearInfoMsg')  // ❌ 不存在的 mutation
+  },
+  reloadLog() {
+    this.$store.dispatch('setInteverLog')  // ❌ 不存在的 action
+  },
+}
+```
+
+**修改后**：
+```javascript
+computed: {
+  infoMsg() {
+    // Terminal 功能暂时禁用
+    return '终端功能暂未启用'
+  }
+},
+methods: {
+  clearLog() {
+    // Terminal 功能暂时禁用
+    this.$Message.info('终端功能暂未启用')
+  },
+  reloadLog() {
+    // Terminal 功能暂时禁用
+    this.$Message.info('终端功能暂未启用')
+  },
+}
+```
+
+**说明**：
+- ✅ 移除了对不存在的 Vuex 状态的依赖
+- ✅ 提供了友好的提示信息
+- ✅ 避免了运行时错误
+
+### 4. 修复 `asyncModal` 组件未注册错误
+
+**问题位置**：`src/components/main/components/terminal/index.vue`
+
+**错误原因**：
+- 模板中使用了 `<asyncModal>` 组件
+- 但没有在 `components` 中注册
+
+**修改前**：
+```javascript
+import { mapGetters } from 'vuex'
+import Terminal from './terminal.vue'
+export default {
+  components: {
+    Terminal  // ❌ 缺少 asyncModal
+  },
+}
+```
+
+**修改后**：
+```javascript
+import Terminal from './terminal.vue'
+import asyncModal from '@/components/asyncModal'
+export default {
+  components: {
+    Terminal,
+    asyncModal  // ✅ 添加 asyncModal 组件
+  },
+}
+```
+
+**说明**：
+- ✅ 导入了 `asyncModal` 组件
+- ✅ 在 `components` 中注册
+- ✅ 移除了不需要的 `mapGetters` 导入
+
+## 📊 修复总结
+
+### 修改的文件
+
+1. **`src/components/main/main.vue`**
+   - 移除了重复的 `getSysTitle` 调用
+
+2. **`src/components/main/components/terminal/index.vue`**
+   - 移除了 `isServerRun` getter 的使用
+   - 添加了 `asyncModal` 组件注册
+
+3. **`src/components/main/components/terminal/terminal.vue`**
+   - 移除了 `infoMsg` getter 的使用
+   - 修改了 `clearLog` 和 `reloadLog` 方法
+
+### 错误修复
+
+- ✅ `[vuex] unknown action type: getSysTitle` - 已修复
+- ✅ `[vuex] unknown getter: isServerRun` - 已修复
+- ✅ `[vuex] unknown getter: infoMsg` - 已修复
+- ✅ `Unknown custom element: <asyncModal>` - 已修复
+
+## 💡 Terminal 功能说明
+
+### 当前状态
+
+Terminal 功能已**暂时禁用**，因为：
+- 缺少相关的 Vuex store 配置
+- 缺少后端接口支持
+- 不影响系统核心功能
+
+### 如何启用 Terminal 功能
+
+如果需要启用 Terminal 功能，需要：
+
+**1. 在 Vuex store 中添加 Terminal 模块**
+
+创建 `src/store/terminal.js`：
+```javascript
+export default {
+  namespaced: true,
+  state: {
+    isServerRun: false,
+    infoMsg: ''
+  },
+  getters: {
+    isServerRun: state => state.isServerRun,
+    infoMsg: state => state.infoMsg
+  },
+  mutations: {
+    setServerRun(state, value) {
+      state.isServerRun = value
+    },
+    setInfoMsg(state, msg) {
+      state.infoMsg += msg + '\n'
+    },
+    clearInfoMsg(state) {
+      state.infoMsg = ''
+    }
+  },
+  actions: {
+    async setInteverLog({ commit }) {
+      // 实现日志加载逻辑
+    }
+  }
+}
+```
+
+**2. 在 `src/store/index.js` 中注册模块**
+
+```javascript
+import terminal from './terminal'
+
+export default new Vuex.Store({
+  modules: {
+    user,
+    app,
+    terminal  // 添加 terminal 模块
+  }
+})
+```
+
+**3. 更新组件代码**
+
+`src/components/main/components/terminal/index.vue`：
+```javascript
+computed: {
+  ...mapGetters('terminal', {
+    isServerRun: 'isServerRun'
+  }),
+  iconclass() {
+    let curClass = 'terminal-icon ml10 '
+    if (this.isServerRun) {
+      curClass += ' run'
+    }
+    return curClass
+  }
+}
+```
+
+`src/components/main/components/terminal/terminal.vue`：
+```javascript
+computed: {
+  ...mapGetters('terminal', {
+    infoMsg: 'infoMsg'
+  })
+},
+methods: {
+  clearLog() {
+    this.$store.commit('terminal/clearInfoMsg')
+  },
+  reloadLog() {
+    this.$store.dispatch('terminal/setInteverLog')
+  }
+}
+```
+
+## ⚠️ 注意事项
+
+### 1. 系统标题获取时机
+
+系统标题在 `demo-project/src/main.js` 的 `mounted` 钩子中获取：
+
+```javascript
+mounted() {
+  AdminFramework.uiTool.setRem()
+  
+  // 只在已登录时获取系统标题
+  const token = this.$store.state.user.token
+  if (token) {
+    this.$store.dispatch('app/getSysTitle', {
+      defaultTitle: 'Demo 管理系统',
+      defaultLogo: ''
+    })
+  } else {
+    document.title = 'Demo 管理系统'
+  }
+}
+```
+
+**不要在其他地方重复调用**，避免：
+- 重复的 HTTP 请求
+- 不必要的性能开销
+- 可能的竞态条件
+
+### 2. Vuex 模块命名空间
+
+所有 Vuex 模块都使用了 `namespaced: true`：
+
+```javascript
+// ✅ 正确的调用方式
+this.$store.dispatch('app/getSysTitle')
+this.$store.commit('user/setToken', token)
+this.$store.getters['user/userName']
+
+// ❌ 错误的调用方式
+this.$store.dispatch('getSysTitle')
+this.$store.commit('setToken', token)
+this.$store.getters['userName']
+```
+
+**使用 mapGetters/mapActions 时**：
+```javascript
+// ✅ 正确
+...mapGetters('app', ['sysFormModel'])
+...mapActions('user', ['handleLogin'])
+
+// 或者
+...mapGetters({
+  sysFormModel: 'app/sysFormModel'
+})
+```
+
+### 3. 组件注册
+
+使用第三方组件或自定义组件时，必须：
+1. 导入组件
+2. 在 `components` 中注册
+3. 才能在模板中使用
+
+```javascript
+// ✅ 正确
+import asyncModal from '@/components/asyncModal'
+export default {
+  components: {
+    asyncModal
+  }
+}
+
+// ❌ 错误（直接在模板中使用未注册的组件）
+<template>
+  <asyncModal></asyncModal>
+</template>
+```
+
+## ✅ 验证清单
+
+### 功能验证
+
+- ✅ 登录功能正常
+- ✅ 系统标题正确显示
+- ✅ 菜单正确显示
+- ✅ 页面跳转正常
+- ✅ 控制台没有 Vuex 错误
+
+### 错误检查
+
+- ✅ 没有 `[vuex] unknown action` 错误
+- ✅ 没有 `[vuex] unknown getter` 错误
+- ✅ 没有 `Unknown custom element` 错误
+- ✅ 没有组件注册错误
+
+---
+
+**所有 Vuex 错误已修复！** 🎉
+
+现在系统可以正常运行，Terminal 功能暂时禁用但不影响核心功能。
+