如何在调查应用程序中使用Vue.js在Vuex store中存储和检索嵌套值？

npm install vuex

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    survey: {
      questions: [
        {
          id: 1,
          text: 'What is your favorite color?',
          answer: ''
        },
        {
          id: 2,
          text: 'What is your favorite food?',
          answer: ''
        }
      ]
    }
  },
  mutations: {
    SET_ANSWER(state, { questionId, answer }) {
      const question = state.survey.questions.find(q => q.id === questionId);
      if (question) {
        question.answer = answer;
      }
    }
  },
  actions: {
    setAnswer({ commit }, payload) {
      commit('SET_ANSWER', payload);
    }
  },
  getters: {
    getSurvey(state) {
      return state.survey;
    },
    getQuestionById: (state) => (id) => {
      return state.survey.questions.find(q => q.id === id);
    }
  }
});

<template>
  <div>
    <div v-for="question in survey.questions" :key="question.id">
      <p>{{ question.text }}</p>
      <input
        type="text"
        v-model="question.answer"
        @input="updateAnswer(question.id, question.answer)"
      />
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex';

export default {
  computed: {
    ...mapState(['survey']),
    ...mapGetters(['getSurvey', 'getQuestionById'])
  },
  methods: {
    ...mapActions(['setAnswer']),
    updateAnswer(questionId, answer) {
      this.setAnswer({ questionId, answer });
    }
  }
};
</script>