在 Vue 管理模板中单击菜单图标时出现错误

Question

我已经安装了 CoreUI Vue 管理模板。除了 菜单图标 之外，所有代码都工作正常。

当我单击它隐藏侧边栏（它是内置功能。）时，它不起作用并给出此错误

vuex.esm-bundler.js:943 [vuex] unknown mutation type: toggleSidebar

下面是实现菜单图标的**AppHeader.vue **文件代码

<template>
  <CHeader position="sticky" class="mb-4">
    <!--  eslint-disable  -->
        <CContainer fluid>
            <!-- <CHeaderToggler class="ps-1" @click="$store.commit('toggleSidebar')">
   <CIcon icon="cil-menu" size="lg" />
            </CHeaderToggler> -->
             <CHeaderToggler class="ps-1" @click="toggleSidebar">
   <CIcon icon="cil-menu" size="lg" />
            </CHeaderToggler>
            <CHeaderBrand class="mx-auto d-lg-none" to="/">
                <CIcon :icon="logo" height="48" alt="Logo" />
            </CHeaderBrand>
            <CHeaderNav class="d-none d-md-flex me-auto">
                <CNavItem>
                    <CNavLink href="/dashboard"> Dashboard </CNavLink>
                </CNavItem>
                <!-- <CNavItem>
                                          <CNavLink href="">Users</CNavLink>
                                        </CNavItem>
                                        <CNavItem>
                                          <CNavLink href="">Settings</CNavLink>
                                        </CNavItem> -->
            </CHeaderNav>
            <CHeaderNav>
                <CNavItem>
                    <CNavLink href="">
                        <CIcon class="mx-2" icon="cil-bell" size="lg" />
                    </CNavLink>
                </CNavItem>
                <CNavItem>
                    <CNavLink href="">
                        <CIcon class="mx-2" icon="cil-list" size="lg" />
                    </CNavLink>
                </CNavItem>
                <CNavItem>
                    <CNavLink href="">
                        <CIcon class="mx-2" icon="cil-envelope-open" size="lg" />
                    </CNavLink>
                </CNavItem>
                <AppHeaderDropdownAccnt />
            </CHeaderNav>
        </CContainer>
        <CHeaderDivider />
        <CContainer fluid>
            <AppBreadcrumb />
        </CContainer>
    </CHeader>
</template>

<script>
/*  eslint-disable */
import { mapMutations } from 'vuex';
import AppBreadcrumb from './AppBreadcrumb'
import AppHeaderDropdownAccnt from './AppHeaderDropdownAccnt'
import { logo } from '@/assets/brand/logo'

export default {
    name: 'AppHeader',
    components: {
        AppBreadcrumb,
        AppHeaderDropdownAccnt,
    },
    methods: {
    ...mapMutations(['toggleSidebar']),
    },
    setup() {
        return {
            logo,
        }
    },
}
/*  eslint-disable */
</script>

这是vuex实现的代码文件index.js它在store文件夹中

import { createStore } from 'vuex'

export default createStore({
  state: {
    sidebarVisible: '',
    sidebarUnfoldable: false,
  },
  mutations: {
    toggleSidebar(state) {
      state.sidebarVisible = !state.sidebarVisible
    },
    toggleUnfoldable(state) {
      state.sidebarUnfoldable = !state.sidebarUnfoldable
    },
    updateSidebarVisible(state, payload) {
      state.sidebarVisible = payload.value
    },
  },
  actions: {},
  modules: {},
})

下面是main.js文件代码

// eslint-disable-next-line
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import auth from './auth/auth'
import axios from 'axios'

import CoreuiVue from '@coreui/vue'
import CIcon from '@coreui/icons-vue'
import { iconsSet as icons } from '@/assets/icons'
import DocsExample from '@/components/DocsExample'

const app = createApp(App)
// app.use(store)
app.use(router)
app.use(CoreuiVue)

app.provide('icons', icons)
app.component('CIcon', CIcon)
app.component('DocsExample', DocsExample)

// Access token code
axios.defaults.baseURL = 'https://your-instance.salesforce.com'

axios.interceptors.request.use((config) => {
  const accessToken = auth.getters.accessToken
  if (accessToken) {
    config.headers.Authorization = `Bearer ${accessToken}`
  }
  return config
})

axios.interceptors.response.use(
  (response) => response,
  async (error) => {
    if (error.response.status === 401) {
      // Access token has expired, redirect to the login page.
      // You can also show a message to the user indicating that they need to log in again.
      // Replace '/login' with the actual path to your login page.
      window.location.href = '/login'
    }
    return Promise.reject(error)
  },
)
app.use(store)
app.use(auth)
app.mount('#app')

任何人都可以帮我查明问题以及如何解决它。

Answer 1

在 vuex 商店中，您必须使用 sidebarVisible 类型布尔值的状态，之后可能可以正常工作。

import { createStore } from 'vuex';

export default createStore({
  state: {
    sidebarVisible: false, //hidden by default
    sidebarUnfoldable: false,
  },
  mutations: {
    toggleSidebar(state) {
      state.sidebarVisible = !state.sidebarVisible;
    },
  },
  actions: {},
  modules: {},
});