Question

对于我的应用程序，我正在使用Vue-router并存储在一起工作。在我的状态下，我正在存储一些问题。问题的内容将这样保存在我的商店中：

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;
    }
  })

当然还有othe config，但这一切工作正常。我正在使用Component中的以下代码通过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（问题1也保持启用状态），当您回答问题2时，应启用问题3，等等。

Answer 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
  }
}

Answer 2

在您的商店中输入以下突变代码：

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

在您的组件中，您可以按如下所示轻松地进行此突变：

this.$store.commit('enable')

动态更改状态Vue

2 个答案:

组成部分

商店