How to implement Zhihu-like answer and comment function in Vue?

Vue is a very popular front-end framework. Its flexibility and ease of use make it widely used in web development. Zhihu is a very popular Q&A community with a large user base and rich content. In Zhihu, the comment function under answers is very important. In this article, we will explore how to use Vue to implement Zhihu-like answer and comment functions.

1. Function introduction

In Zhihu, users can comment under answers. Comments can form a tree structure, where each node represents a comment and there is a parent-child relationship between nodes. Users can add their own comments under each node, which will also form a tree structure. In order to facilitate users to view, Zhihu will also expand and shrink comments.

The following is a list of functions that need to be implemented in this article:

1. Users can add comments under answers;
2. Comments can form a tree structure;
3. Users can add comments under each node;
4. Display comments according to hierarchy;
5. Users can expand and contract comments.

2. Data structure design

Before implementing this function, we need to design the data structure first. In Zhihu, comments are in a tree structure, and each node has the following attributes:

1. id: the unique identifier of the node;
2. content: the content of the node;
3. author: the author of the node;
4. createTime: the node creation time;
5. children: the list of child nodes.

The following is the definition of the data structure:

interface Comment {
  id: string;
  content: string;
  author: string;
  createTime: number;
  children?: Comment[];
}

For each answer, we need a list of comments. Because there may be multiple answers, we need to put these comment lists into an object, so that the corresponding comment list can be obtained by the id of the answer. The following is the definition of the data structure:

interface CommentData {
  [answerId: string]: Comment[];
}

3. Implementation steps

3.1 Display comments

We need to display the comment list first. To display a tree structure, we can use recursive components. Recursive components mean that the component can call itself in its own template.

In Vue, you can use the name attribute of the component to implement recursion. Here is a simple component:

<template>
  <div>
    <div>{{ comment.content }}</div>
    <div v-if="comment.children">
      <comment v-for="c in comment.children" :key="c.id" :comment="c" />
    </div>
  </div>
</template>

<script>
export default {
  name: "comment",
  props: {
    comment: {
      type: Object,
      required: true,
    },
  },
};
</script>

This component will recursively render all child nodes.

3.2 Add a comment

When adding a comment, we need to specify which node to add it to. Therefore, we need to add a unique identifier to each node. In this example, we use UUID to generate a unique identifier. At the same time, for the convenience of operation, we also save the ID of the answer to which it belongs in each node.

We can use Vuex to manage state. The process of adding comments is as follows:

1. The user enters the comment content and selects which node to add it to;
2. Trigger Vuex's Action, send a request to the server, and add comments to the server Record;
3. After the addition is successful, the server returns a new comment record;
4. Trigger Vuex's Mutation to add the new comment record to the state.

In the component, we can use the v-model directive to bind the comment content entered by the user, and use the <select> element to select which node to add it to. . The following is an example of a component:

<template>
  <div>
    <div>
      <textarea v-model="content" />
    </div>
    <div>
      <select v-model="parentId">
        <option value="root">回答</option>
        <option :value="comment.id" v-for="comment in comments" :key="comment.id">
          {{ comment.content }}
        </option>
      </select>
    </div>
    <div>
      <button @click="addComment">添加评论</button>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";

export default {
  props: {
    answerId: {
      type: String,
      required: true,
    },
    comment: {
      type: Object,
      required: false,
      default: () => null,
    },
  },
  data() {
    return {
      content: "",
      parentId: "root",
      comments: [],
    };
  },
  created() {
    if (this.comment) {
      this.comments = this.comment.children || [];
    } else {
      this.comments = this.$store.state.comments[this.answerId] || [];
    }
  },
  methods: {
    ...mapActions("comments", ["addComment"]),
  },
};
</script>

In this component, we bidirectionally bind the content entered by the user and the selected parent node id to the data of the component. At the same time, the component also receives a comment attribute. If this attribute exists, it means that the component is to be added to an existing comment; otherwise, the component is to be added to a new comment under the answer.

In the created method of the component, we retrieve the list of child nodes of the comments to be added by the component. If the current component is to be added to an existing comment, use its child node list; otherwise, we get the comment list of the answer from the Vuex state.

In the component's addComment method, we can call Vuex's Action to add a new comment record to the server:

async addComment() {
  const { content, parentId } = this;
  const answerId = this.answerId;
  await this.addComment({ answerId, parentId, content });
  this.$emit("added");
}

After the Action is processed, we trigger added event to notify the parent component to refresh the interface.

3.3 Expanding and shrinking comments

Expanding and shrinking comments is a relatively complex function. It is necessary to record the expansion status of each node and quickly obtain the node and its child nodes. We can record the expansion status of each node in the Vuex state.

The process of expanding and shrinking comments is as follows:

1. The user clicks to expand or shrink;
2. Trigger Vuex's Mutation and update the expansion status of the corresponding node;
3. The component recursively renders child nodes based on the expanded state.

For this function we need to write a recursive component. The component will decide whether to render child nodes based on whether the node is expanded. In this component, we also need to write an expand and collapse button. The following is the code of the component:

<template>
  <div>
    <div>
      <div>{{ comment.content }}</div>
      <div>
        <button @click="toggle"> {{ open ? "收起" : "展开" }} </button>
      </div>
    </div>
    <div v-if="open && comment.children">
      <comment v-for="subComment in comment.children" :key="subComment.id" :comment="subComment" />
    </div>
  </div>
</template>

<script>
export default {
  name: "comment",
  props: {
    comment: {
      type: Object,
      required: true,
    },
  },
  computed: {
    open() {
      return this.$store.state.expanded[this.comment.id];
    },
  },
  methods: {
    toggle() {
      this.$store.commit("toggle", this.comment.id);
    },
  },
};
</script>

In this component, we use the expanded state in Vuex to record whether each node is expanded. In the computed component, we use this state to determine whether the current node is expanded. In the component's methods, we use Vuex's Mutation to update the expanded state.

The processing logic of the expansion state is very simple. We only need to invert the expansion state of the corresponding node in Mutation:

toggle(state, id) {
  state.expanded[id] = !state.expanded[id];
},

4. 总结

本文介绍了如何使用Vue实现仿知乎的回答评论功能，包括评论的树形结构、添加评论、展开和收缩评论。Vue的组件、状态管理和递归组件等特性，为实现该功能提供了非常便利的支持。如果您想尝试实现仿知乎的回答评论功能，本文提供了非常好的参考。

The above is the detailed content of How to implement Zhihu-like answer and comment function in Vue?. For more information, please follow other related articles on the PHP Chinese website!