# 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 功能暂时禁用但不影响核心功能。