在vuex动作中使用提取方法

Question

我创建了一个获取API的存储操作。当我尝试从创建的生命周期挂钩中的组件分派它时。我收到无法read property 'dispatch' of undefined错误。我知道有几个类似的问题，但没有一个解决了这个问题。

我也尝试以常规方法分派它，但仍然收到此错误。

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);
        });
    }
  }
});

这是我尝试在-中分发的组件]

<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>
我做错了什么？ 

我创建了一个获取API的存储操作。当我尝试从创建的生命周期挂钩中的组件分派它时。我收到无法读取未定义错误的属性“ dispatch”。我知道有...

Answer 1

开始添加

Answer 2

那是因为您错过了将vuex存储选项添加到Vue的根实例的过程。为了解决该问题，请导入您的商店并将其附加到您的vue实例。