Vue js vuex 无法在我的循环中显示我的数据

Question

但我无法使用 v-for 显示评论，而且我不明白为什么我的评论数据不起作用。我知道有错误，但我找不到它。我请求 returns 一个数据，但我无法在循环中显示它。感谢您的帮助

在store/index.js

state :{
 dataComments:[]
}
mutation: {
 getComments(state, dataComments) {
    console.log(dataComments)
    state.dataComments = dataComments;
  },
}
action: {
getArticleComments: ({ commit }, dataArticles) => {
    return new Promise(() => {
      instance.get(`/comment/${dataArticles.article_id}`)
      .then(function () {
        commit('getComments');
      })
      .catch(function (error) {
        console.log(error)
      })
    })
  },
}

在我的 views/home.vue

export default {
  name: "Home",
  data: function () {
    return {
      articles: [],
      comments: [],
    }
  },
methods: {
 getArticleComments(comment) {
      this.$store
        .dispatch("getArticleComments",comment)
        .then((res) => {
          this.comments = res.data;
        });
    },
}

<div class="pos-add">
              <button
                @click="getArticleComments(article)"
                type="button"
                class="btn btn-link btn-sm">
                Show comments
              </button>
            </div>
            <!-- <div v-show="article.comments" class="container_comment"> -->
            <div class="container_comment">
              <ul class="list-group list-group comments">
                <li
                  class="
                    list-group-item
                    fst-italic
                    list-group-item-action
                    comment
                  "
                  v-for="(comment, indexComment) in comments"
                  :key="indexComment"
                >
                  {{ comment.comment_message }}
                  <!-- {{ comment.comment_message }} -->
                </li>
              </ul>
            </div>

Answer 1

您的操作 getArticleComments 没有 return 任何内容，我会避免将操作更改为 return 数据。而是在 home.vue

中删除对 this.comments 的分配

操作不 return 数据，它们获取数据，并调用更新商店的突变。

您的商店应该有一个 getter 公开状态，在本例中是 dataComments。

getters: {
    dataComments (state) {
  return state.dataComments;
  }
}

然后在您的 home.vue 中您可以使用助手 mapGetters

computed: {
  ...mapGetters([
    'dataComments'
  ])
}

您希望您的视图在您的商店中引用您的 getter，然后当任何操作更新它们时，它们可以是被动的。

更多信息：https://vuex.vuejs.org/guide/getters.html

Answer 2

据我所知，您的 getArticleComments 操作中没有 return 任何数据。要收到评论，您应该 return 他们，或者更好的是，直接从您的商店数据中获取它们。

首先确保将响应数据传递给变异方法：

getArticleComments: ({ commit }, dataArticles) => {
    return new Promise(() => {
      instance.get(`/comment/${dataArticles.article_id}`)
      .then(function (res) {
        commit('getComments', res.data);
      })
      .catch(function (error) {
        console.log(error)
      })
    })
  },

发货后，您可以直接 return 响应数据，也可以直接访问您的商店状态。最佳实践是使用 getter，你应该在 vue 文档中查看。

getArticleComments(comment) {
      this.$store
        .dispatch("getArticleComments",comment)
        .then((res) => {
          // in your case there is no res, because you do not return anything
          this.comments = 
          this.$store.state.dataComments;
        });
    },

Vue js vuex 无法在我的循环中显示我的数据

Vue js vuex unable to display my data in my loop

javascript

vue.js

vuex