title: Vue.js how to call mutation in created or mounted hook?
body: <p>In my vue.js app, I have a store.js file where I create and export a Vuex store, like so:</p>
  
  <pre><code>import Vue from 'vue'
  import Vuex from 'vuex'
  
  Vue.use(Vuex)
  
  
  export const store = new Vuex.Store({
      state: {
          listCategories: [
            {id: 1, name: "hello"},
            {id: 2, name: "hello2"},
          ]
      },
  
      mutations: {
  
         pushCategories: (state, payload) =&gt; {
          state.listCategories.push(payload);
         },
  </code></pre>
  
  <p>In a vue component, I want to change the store.state.listCategories variable after an Ajax call like so:</p>
  
  <pre><code>import {mapActions} from 'vuex'
  import {mapGetters} from 'vuex'
  
  export default {
  
      data: function() {
        return {
           categories: this.$store.state.listCategories
        }
      },
  
      methods: {
          ...mapActions([
              'pushCategories'
          ]),
  
      },
  
      created() {
          var vm = this;
  
          $.ajaxSetup({
              headers: {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              }
          });
  
          $.ajax({
              url: '/ajaxRequest',
              type: 'POST',
              success: function(data) {
                  vm.pushCategories({id:3,name:"new Category"});
              },
              error: function() {
                  console.log("error");
              }
          }) 
  
      },
  </code></pre>
  
  <p>But it creates an error: </p>
  
  <blockquote>
    <p>unknown action type: pushCategories</p>
  </blockquote>
  
  <p>Any idea where this error comes from ?</p>
  
  <p>Thanks a lot</p>