title: Nuxt js how dispatch action in store and change state
body: <p>i have look some articles about it but i didn’t understand so much</p>
  
  <p>here is my problem :</p>
  
  <p>i have a component in nuxt</p>
  
  <pre><code>&lt;a @click="openMenu"&gt;Open Menu&lt;/a&gt;
  &lt;div v-if="isUserNav"&gt; ...  &lt;/div&gt;
  </code></pre>
  
  <p>basically i want on click change to state of isUserNav to true via vuex store</p>
  
  <p>here in my component i can access to state</p>
  
  <pre><code>import {
  mapState
  } from ‘vuex’
  
  export default {
      computed: {
          ...mapState({
              isUserNav: state =&gt; state.isUserNav
          })
      },
      methods: {
          openMenu () {
              this.$store.commit('openMenu')
          },
      }
  }
  </code></pre>
  
  <p>here is vuex store:</p>
  
  <pre><code>import Vuex from 'vuex'
  
  
  const createStore = () =&gt; {
      return new Vuex.Store({
          state: () =&gt; ({
              // USER NAV COMPONENT
              isUserNav: false,
              testData: "Hello"
          }),
          actions: {
              async openMenu() {
                this.state.isUserNav = true;
              }
            }
      })
  }
  
  export default createStore
  </code></pre>
  
  <p>there is i can’t run action exactly i can access to action but it giving</p>
  
  <pre><code>[vuex] unknown mutation type: openMenu
  </code></pre>
  
  <p>error in console.</p>
  
  <p>where i make mistake and what i need to do ?</p>