在组件之间从 Vuex Array 传递对象时失去 Vue 反应性

如何解决在组件之间从 Vuex Array 传递对象时失去 Vue 反应性

我的 Main.vue 中有两个子组件：

• 所有评论的列表视图（list-comments）
• 单个项目视图的详细视图（列表-评论）

根据 currentListView 的值，显示列表或详细视图

Main.vue：以下是列表/详细视图的子组件：

<template>
  <div id="list" v-if="enableListDrawer">
    <list-comments
      v-if="currentListView == 'comments'"
      :project="project"
      @showComment="showComment"
    />
    <list-comment
      v-else-if="currentListView == 'comment'"
      :selectedComment="selectedComment"
      @submitConversation="submitConversation"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentListView: "comments",selectedComment: {},};
  },computed: {
    projects() {
      return this.$store.getters.projects.filter(
        (o) => o._id == this.currentProjectToEdit
      );
    },project() {
      return this.$store.getters.projects
        .filter((o) => o._id == this.currentProjectToEdit)[0]
        .pages.filter((page) => page.url == window.location.href);
    },},methods: {
    showComment(comment) {
      this.selectedComment = comment;
      this.currentListView = "comment";
    },};
</script>

在 list-comments 组件中，我正在迭代项目数组中的项目。当用户单击列表中的一条评论时，该组件会向 Main.vue 发出一个 showComment 事件（并从数组中传递一个 item 对象）。

在 Main.vue 中，emit 触发 showComment，我将传递的对象设置为数据变量 selectedComment（我猜这是 Vue 反应性丢失的点）。 selectedComment 绑定到列表评论组件，该组件被激活以显示详细信息视图。

此时，细节视图中的单个项目对象不再具有反应性。

详细信息视图组件，我在其中显示一条评论：

在详细信息视图中没有什么特别的事情发生。我不是直接修改对象

<template>
  <div id="list-comment">
      ...
  </div>
</template>

<script>

import axios from "axios";

export default {
  components: {},data() {
    return {
      newReply: "",props: {
    selectedComment: {
      type: Object,required: true,methods: {
    deleteConversation(id) {
      this.$store.dispatch("deleteConversation",{
        commentId: this.selectedComment._id,conversationId: id,currentProjectToEdit: "",});
    },onSubmitConversation() {
      if (this.newReply.length) {
        this.$emit("submitConversation",{
          pageId: "",commentId: this.selectedComment._id,reply: this.newReply,});
      }
    },};
</script>

列表视图组件，其中可以选择一项

<template>
  <div id="list-comment">
    <div
      id="list-card"
      class="list-card-hover"
      v-for="(item,index) in project[0].comments"
      :key="index"
      @click="showComment(item)"
    >
      <div>{{ item.comment }}</div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},data() {
    return {};
  },props: {
    project: {
      type: Array,methods: {
    showComment(item) {
      this.$emit("showComment",item);
    },};
</script>

我怎样才能保持我的 Vue-App 的反应性？什么是更好的方法？

解决方法

Detail 视图使用索引号作为键，从而剥离了 vue 的反应性。由于密钥未更新，因此触发更新。

首先让我们假设 project[0].comments 中的每个评论都有一个 id 或某种唯一值。

不是将 key 绑定到索引，而是将其绑定到唯一值。

<div
  id="list-card"
  class="list-card-hover"
  v-for="item in project[0].comments"
  :key="index.id"
  @click="showComment(item)"
>
      <div>{{ item.comment }}</div>
</div>

如果我们没有可以绑定的唯一键，有两种选择：

1. 创建一个（这可能需要在服务器端，具体取决于您的用例）
2. 我们可以观察道具数据的变化，并强制重新渲染

显然，#1 是比 2 号更好的解决方案，但为了演示起见，我们将如何实现它。

<template>
  <div id="list-comment" :key="updateCount">
    <div
      id="list-card"
      class="list-card-hover"
      v-for="(item,index) in project[0].comments"
      :key="index"
      @click="showComment(item)"
    >
      <div>{{ item.comment }}</div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},data() {
    return {
        updateCount:0,};
  },props: {
    project: {
      type: Array,required: true,},watch:{
    project:{
        deep:true,handler(){
            this.updateCount++;
        }
    }
  },methods: {
    showComment(item) {
      this.$emit("showComment",item);
    },};
</script>

另外，我假设项目有一个唯一的 ID，你可以将它作为道具传递，并使用该唯一的 ID 作为键。

,

我想我现在已经找到了一个解决方案 - 也许有更好的模式，但我现在基本上做的是，从列表视图中我发出一个只有对象的 _id 的事件。

列表视图组件：

<div
   id="webcheck-guru-list-card"
   class="webcheck-guru-list-card-hover"
   v-for="item in project[0].comments"
   :key="item._id"
   @click="showComment(item._id)"
>

在我的 Main.vue 文件中，我将此 _id 存储在 selectedComment 变量中：

showComment(comment) {
   this.selectedComment = comment;
   this.currentListView = "comment";
},

然后我创建了一个新的计算属性，它从我的 (Vuex) 数组中返回选定的评论（基于 _id）：

getSelectedComment() {
   if (this.project.length && this.selectedComment.length) {
     return this.project[0].comments.filter(
       (comment) => comment._id == this.selectedComment
     );
   } else {
     return [];
   }
},

这个新的计算属性绑定到我的细节视图组件。这样一切都是被动的。

<list-comment
   v-else-if="currentListView == 'comment'"
   :selectedComment="getSelectedComment"
   @submitConversation="submitConversation"
/>

也许 Vue 中有一个更好的解决方案/模式 - 我认为我可以轻松地传递对象而不会失去反应性。

如果有人能提出更好的建议，我很高兴！