Question

我已经使用VueJS和Vuex创建了应用程序。此代码在商店中使用：

const separateArticle = {
  state: {article: {}},
  mutations: {
    LOAD_ARTICLE(state, id) {
      fetch(`http://localhost:3000/articles/${id}`, { mode: "cors" })
        .then(resp => resp.json())
        .then(response => {
          state.article = response;})}
  },
  actions: {
    loadSeparateArticle({ commit }, id) {commit("LOAD_ARTICLE", id);}
  },
  getters: { articleData(state) {return state.article;} }
};

组件代码：

<template>
 <div>
   <img src="articleData.imgSrc"/>
    <Article v-bind:article = "articleData" v-bind:key="articleData._id"></Article>
  <div>
    Comments
  </div>
</div>
</template>

<script>
import Article from "./Article.vue";

export default {
  props: ["article"],
  name: "ArticleDetail",
  components: {
    Article
  },
  data() {
    return { articleData: this.$store.getters.articleData };
  },
  created() {
    this.$store.dispatch("loadSeparateArticle", this.$route.params._id);
  }
};
</script>

创建组件时，将触发getter方法，但是在修改商店之后，未调用它。 Vue不了解商店已更新。

如何处理此问题？

商店突变后Vuex吸气剂未更新

0 个答案: