如何修复Vuex未知action类型错误？导航组件复用故障排查

核心问题：拼写错误 #

你遇到的[vuex] unknown action type: nav/toggleSidebar错误，完全是因为单词拼写错误——把Sidebar写成了Sibebar（字母b和e顺序搞反了），导致组件调用的action和getter在store里找不到匹配项。

具体修正步骤 #

1. 修正store/nav.js中的拼写错误 #

把所有toggleSibebar替换成toggleSidebar，包括state、actions、getters里的命名：

export const state = () => ({
  toggleSidebar: false, // 修正拼写
})

export const mutations = {
  TOGGLE_SIDEBAR(state) {
    state.toggleSidebar = !state.toggleSidebar // 修正state属性名
  },
}
export const actions = {
  toggleSidebar({ commit }) { // 修正action名称，和组件调用的一致
    commit('TOGGLE_SIDEBAR')
  },
}

export const getters = {
  toggleSidebar: (state) => state.toggleSidebar // 修正getter名称
}

2. 确认组件中的调用正确性 #

你的HeaderMenu、SideNavHeader组件里调用的$store.dispatch('nav/toggleSidebar')和this.$store.getters['nav/toggleSidebar']是正确的，不需要修改。

验证效果 #

修正后重新运行项目，点击菜单图标就能正常触发侧边栏的显示/隐藏逻辑，控制台的错误也会消失。

内容的提问来源于stack exchange，提问作者Aldrin Cuvi