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

在调查应用程序中使用 Vue.js 和 Vuex 存储和检索嵌套值是一个常见的需求。Vuex 是 Vue.js 的状态管理库，它允许你在应用程序中集中管理状态。以下是一个示例，展示了如何在 Vuex store 中存储和检索嵌套值。

1. 安装 Vuex

首先，确保你已经安装了 Vuex：

npm install vuex

2. 创建 Vuex Store

在你的 Vue 项目中创建一个 Vuex store。你可以在 src/store/index.js 文件中定义 store：

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

3. 在组件中使用 Vuex Store

在你的 Vue 组件中，你可以使用 Vuex store 来存储和检索嵌套值。以下是一个示例组件，展示了如何使用 Vuex store：

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

4. 解释代码

State: state 对象包含了调查问卷的数据结构，其中 survey 对象包含了一个 questions 数组，每个问题都有一个 id、text 和 answer 属性。
Mutations: SET_ANSWER mutation 用于更新特定问题的答案。它接受 questionId 和 answer 作为参数，并找到对应的问题进行更新。
Actions: setAnswer action 用于提交 SET_ANSWER mutation。它接受一个包含 questionId 和 answer 的对象作为参数。
Getters: getSurvey getter 返回整个调查问卷对象，getQuestionById getter 根据问题的 id 返回特定的问题。
Component: 在组件中，使用 mapState 和 mapGetters 来映射 Vuex store 的状态和 getter 到组件的计算属性中。使用 mapActions 来映射 Vuex store 的 action 到组件的方法中。在 updateAnswer 方法中，调用 setAnswer action 来更新答案。