在 vuex 操作中使用 fetch 方法

Question

I created a store action that fetch api. When I'm trying to dispatch it from component in created lifecycle hook. I'm getting Cannot read property 'dispatch' of undefined error. I know there are several similar questions but none of them solved this issue.

I tried to dispatch it also in normal method and still get this error.

store.js

import Vue from "vue";
import Vuex from "Vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    categories: []
  },
  mutations: {
    SET_CATEGORIES(state, categories) {
      state.categories = categories;
    }
  },
  actions: {
    getCategories({ commit }) {
      return fetch("https://api.chucknorris.io/jokes/categories")
        .then(response => {
          return response.json();
        })
        .then(jsonObj => {
          commit("SET_CATEGORIES", jsonObj);
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
});

And this is the component which I try to dispatch in -

<script>
export default {
  data() {
    return {
      joke: "",
      categories: [],
      selectedCat: ""
    };
  },
  computed: {
    disabled() {
      if (this.joke) {
        return false;
      } else {
        return true;
      }
    }
  },
  methods: {
    addToFavs: function() {
      this.$emit("pushJoke", this.joke);
      this.fetchJoke();
    }

  },

  created() {
    this.$store.dispatch('getCategories');
  }  
};
</script>

What am I doing wrong?

Answer 1

Start by adding

import { mapActions } from 'vuex'

in your script

then add to methods

methods: {
  ...mapActions([
     'getCategories'
  ])
.
.
}

and alter your created method to

created() {
  this.getCategories()
}  

Furthermore, you might want to create a vuex action to replace that this.$emit("pushJoke", this.joke); line that you have, and map that in a similar way that you have mapped getCategories

Answer 2

That's because you missed to add your vuex store option to the root instance of Vue. To solve that import your store and attach it to your vue instance.

import { store } from '.store'

const app = new Vue({
  store
})