动态变化的状态 vue答案

【问题标题】：Dynamically changing state vue动态变化的状态 vue
【发布时间】：2020-06-26 12:00:51
【问题描述】：

对于我的应用程序，我使用 Vue-router 和 store 一起工作。在我的状态下，我正在存储一些问题。问题的内容保存在我的商店中，如下所示：

export default new Vuex.Store({
  state: {
    blabla: [
      {
        question: 'question1',
        answer: false,
        givenAnswer: null,
        disabled: false,
      },
      {
        question: 'question2',
        answer: false,
        givenAnswer: null,
        disabled: false
      }
    ],
    score: null
  },
  getters: {
    getQuestionList: state => {
      return state.questions;
    }
  })

当然还有其他配置，但这一切都很好。我通过在我的组件中使用此代码通过我的 Vue 模板中的 Getter 获取这些数据：

export default {
  data() {
    return {
      questionId: this.$route.params.id - 1
    }
  },
  computed: {
    getQuestions () {
      return this.$store.getters.getQuestionList
    }
  }
}

<p>{{ getQuestions[questionId].question }}</p>

现在我想在有人回答问题时将每个问题的状态动态更改为disabled:false，以便能够回答下一个问题。但是我不知道该怎么做。

有人能把我引向正确的方向吗？谢谢！

为澄清而编辑：有一个包含 10 个问题的列表，当您开始时，只有第一个问题在开始时启用。当您回答问题 1 时，应启用问题 2（问题一也保持启用状态），当您回答问题 2 时，应启用问题 3，等等。

【问题讨论】：

您好 Farallo，欢迎来到 S/O。您的问题是合理的，但需要改进 - 通常stackoverflow问题需要具体而简洁。请考虑修改它并明确说明您阅读了 vuex 文档并至少自己尝试了一些东西。 stackoverflow.com/help/how-to-ask

标签： vue.js state vuex

【解决方案1】：

您可以只提交一个为指定元素设置disabled: false 的突变：

组件

<button @click="submitQuestion(question.id)"></button>

methods: {
  submitQuestion (id) {
    // ...
    this.$store.commit('ENABLE_QUESTION', id + 1) // passing id of the next question
  }
}

商店

state: {
  questions: [
    {
      id: 0,
      question: 'question1',
      answer: false,
      givenAnswer: null,
      disabled: false,
    },
    {
      id: 1,
      question: 'question2',
      answer: false,
      givenAnswer: null,
      disabled: false
    }
  ]
}

...

mutations: {
  ENABLE_QUESTION (state, id) {
    let questionIndex = state.questions.findIndex(item => item.id === id)
    state.questions[questionIndex].disabled = false
  }
}

【讨论】：

嗨，亚历克斯，感谢您的回答。然而这不是我的意思。有一个包含 10 个问题的列表，当您开始时，只有第一个问题在开始时启用。当您回答问题 1 时，应启用问题 2（问题一也保持启用状态），当您回答问题 2 时，应启用问题 3，等等。
@Farallo 我编辑了答案。将id 属性添加到问题对象，然后将id 传递给突变

【解决方案2】：

在你的商店里放这个突变代码：

mutations: {
    enable (state) {
    state.questions.forEach(item => {
      item.disabled = false
    )}
  }
}

在您的组件中，您可以按如下方式轻松提交此变更：

this.$store.commit('enable')

【讨论】：