vue.js - vuex:未知的 getter:文章

Question

我尝试实现 vuex 模块并了解用法。在尝试在我的 home.vue 中导入模块时，我找到了这个解决方案:

import { FETCH_INDEX_ARTICLES } from "@/store/types/actions.type.js";
// imports this => export const FETCH_INDEX_ARTICLES = "fetchIndexArticles"
import { mapGetters, mapActions} from 'vuex'
export default {
  name: "Home",
  data() {
      return {}
  },
  computed: {
      ...mapGetters(['articles']),
    },
  methods: {
      ...mapActions([FETCH_INDEX_ARTICLES])
  }
  created() {
      this.$store.dispatch(FETCH_INDEX_ARTICLES);
  }
};

但我得到的是

vuex.esm.js?2f62:438 [vuex] unknown action type: fetchIndexArticles
vuex.esm.js?2f62:950 [vuex] unknown getter: articles

商店/index.js

export default new Vuex.Store({
  modules: {
    articles,
  }
});

商店/模块/articles.js

const state = {
  articles: [],

};
const getters = {
  articles(state) {
    return state.articles;
  },
};
const mutations = {
  [SET_ARTICLES] (state, pArticles) {
    state.article = pArticles
    state.errors = {}
  }
}
const actions = {
  [FETCH_INDEX_ARTICLES] (context) {
    context.commit(FETCH_START)
    return ApiService
      .get('/articlelist/index/')
      .then((data) => {
        context.commit(SET_ARTICLES, data.articles);
        context.commit(FETCH_END)
      })
      .catch((response) => {
        context.commit(SET_ERROR, response.data.errors);
      })
    }
};
export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
}

如何正确导入vuex模块？

谢谢

Answer 1

您必须指定您的模块， 当您将模块直接导入组件时，您的方法是有效的

...mapGetters('articles', {
    article: 'articles',
})

this.article(2)

https://vuex.vuejs.org/guide/modules.html#binding-helpers-with-namespace

为了方便使用，我使用方法dispatch来执行操作

this.$store.dispatch('articles/FETCH_INDEX_ARTICLES', {anydata})