vue实现问题的管理

Vue 实现问题管理的方法

使用 Vue 组件组织问题列表

创建一个 QuestionList.vue 组件用于展示问题列表，利用 v-for 指令循环渲染问题数据。通过 props 接收问题数组，并在模板中显示问题标题、描述等信息。

<template>
  <div>
    <div v-for="question in questions" :key="question.id">
      <h3>{{ question.title }}</h3>
      <p>{{ question.description }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    questions: {
      type: Array,
      required: true
    }
  }
}
</script>

利用 Vuex 管理问题状态

在 Vuex store 中定义问题相关的状态和操作，包括添加、删除、更新问题的方法。通过 mutations 和 actions 管理状态变化。

// store/modules/questions.js
const state = {
  questions: []
}

const mutations = {
  ADD_QUESTION(state, question) {
    state.questions.push(question)
  },
  DELETE_QUESTION(state, questionId) {
    state.questions = state.questions.filter(q => q.id !== questionId)
  }
}

const actions = {
  addQuestion({ commit }, question) {
    commit('ADD_QUESTION', question)
  },
  deleteQuestion({ commit }, questionId) {
    commit('DELETE_QUESTION', questionId)
  }
}

export default {
  state,
  mutations,
  actions
}

实现问题表单组件

创建 QuestionForm.vue 组件处理问题的创建和编辑，使用 v-model 绑定表单数据，通过事件触发 Vuex actions。

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="formData.title" placeholder="问题标题">
    <textarea v-model="formData.description" placeholder="问题描述"></textarea>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        title: '',
        description: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$emit('submit', this.formData)
      this.formData = { title: '', description: '' }
    }
  }
}
</script>

集成 API 调用

使用 axios 或其他 HTTP 客户端与后端 API 交互，在 Vuex actions 中异步获取和更新问题数据。

// store/modules/questions.js
import api from '@/api'

const actions = {
  async fetchQuestions({ commit }) {
    const response = await api.get('/questions')
    commit('SET_QUESTIONS', response.data)
  },
  async createQuestion({ commit }, question) {
    const response = await api.post('/questions', question)
    commit('ADD_QUESTION', response.data)
  }
}

添加问题筛选和搜索功能

在问题列表组件中实现筛选和搜索功能，可以使用计算属性基于用户输入过滤问题列表。

<script>
export default {
  data() {
    return {
      searchQuery: ''
    }
  },
  computed: {
    filteredQuestions() {
      return this.questions.filter(question => 
        question.title.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
        question.description.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

实现问题详情页面

创建 QuestionDetail.vue 组件展示单个问题的详细信息，使用路由参数获取问题 ID 并从 store 中获取对应数据。

<template>
  <div v-if="question">
    <h2>{{ question.title }}</h2>
    <p>{{ question.description }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    question() {
      return this.$store.state.questions.questions.find(
        q => q.id === this.$route.params.id
      )
    }
  }
}
</script>