How can I fix an unknown Vuex action type error?-CodePudding

One year ago I built a responsive navigation component for another project, so I dicided to recycle my code for my new one. But it doesn't work, what I get on console is:

[vuex] unknown action type: nav/toggleSidebar

nav is the name of the file that is located in the store folder.
toogleSidebar is the property that I use on the state to handle the mutation.

I have 3 differents components. Here is the code for the firts one, is just for the links.

Component name: HeaderLink.

<template>
  <ul >
    <li ><nuxt-link to="">Noticias</nuxt-link></li>
    <li ><nuxt-link to="">Categorias</nuxt-link></li>
    <li ><nuxt-link to="">Acerca de</nuxt-link></li>
    <li >
      <nuxt-link to=""><button >Ingresar</button></nuxt-link>
    </li>
  </ul>
</template>

The code for the second. Component name: HeaderMenu.

<template>
  <header>
    <div>
      <nuxt-link to="/">
        <img src="../static/logo1.png" alt=""  />
      </nuxt-link>
    </div>
    <div
      
      role="button"
      @click="$store.dispatch('nav/toggleSidebar')"
    >
      <fa-icon icon="bars"  />
    </div>

    <div >
      <header-links></header-links>
    </div>
  </header>
</template>

<script>
import HeaderLinks from './HeaderLinks.vue'

export default {
  components: { HeaderLinks },
}
</script>

And the last compenent name as: SideNavHeader.

<template>
  <div >
    <div v-if="isSidebar"  @click="hideSidebar"></div>
    <transition name="slide-side">
      <div v-if="isSidebar" >
        <header-links></header-links>
      </div>
    </transition>
  </div>
</template>

<script>
import HeaderLinks from './HeaderLinks.vue'
export default {
  components: { HeaderLinks },
  computed: {
    isSidebar() {
      return this.$store.getters['nav/toggleSidebar']
    },
  },
  methods: {
    hideSidebar() {
      this.$store.dispatch('nav/toggleSidebar')
    },
  },
}

Here is my code for my nav.js file:

export const state = () => ({
  toggleSibebar: false,
})

export const mutations = {
  TOGGLE_SIDEBAR(state) {
    state.toggleSibebar = !state.toggleSibebar
  },
}
export const actions = {
  toggleSibebar({ commit }) {
    commit('TOGGLE_SIDEBAR')
  },
}

export const getters = {
  toggleSibebar: (state) => state.toggleSibebar,
}

When I click the bars icon doesn't do anything, instead, as I mention before, I get a console error.

CodePudding user response：

I have a spell mistake, instead of toggleSidebar I wrote toggleSibebar. After the correction the code work as suposse.

Here is the code:

export const state = () => ({
  toggleSidebar: false,
})

export const mutations = {
  TOGGLE_SIDEBAR(state) {
    state.toggleSidebar = !state.toggleSidebar
  },
}

export const actions = {
  toggleSidebar({ commit }) {
    commit('TOGGLE_SIDEBAR')
  },
}

export const getters = {
  toggleSidebar: (state) => state.toggleSidebar,
}

Implementing ESlint on my project was also the solution.