NuXt + Vuex：作为动态路由结构的一部分，使用Setter和Getters

Question

我正在使用一个Web应用程序，因此用户将从许多卡（它们是生命域）中进行选择，每张卡内都是滑块形式的输入字段。我想保存每个生命域的滑块输入，以便为每个生命域构造一个图表。

这是我的文件夹结构：

Domains
  keywords
    importance
      effectiveness
        overview
          _overview.vue
       _effectiveness.vue
     _importance.vue
  _keyword.vue
index.vue

下面是我的状态文件

export const state = () => ({
  cards: [
    {
      title: "Personal Growth",
      src: require("~/assets/images/values/growth.svg"),
      flex: 6,
      id: "1",
      importance: "",
      effectiveness: "",
    },
    {
      title: "Leisure",
      src: require("~/assets/images/customize.svg"),
      flex: 6,
      id: "2",
      importance: "",
      effectiveness: "",
    },
    {
      title: "Sprituality",
      src: require("~/assets/images/values/spirituality.svg"),
      flex: 6,
      id: "3",
      importance: "",
      effectiveness: "",
    },
    {
      title: "Work",
      src: require("~/assets/images/values/work.svg"),
      flex: 6,
      id: "4",
      importance: "",
      effectiveness: "",
    },
    {
      title: "Health",
      src: require("~/assets/images/values/health.svg"),
      flex: 6,
      id: "5",
      importance: "",
      effectiveness: "",
    },
    {
      title: "Community \n& Environment",
      src: require("~/assets/images/values/community.svg"),
      flex: 6,
      id: "6",
      importance: "",
      effectiveness: "",
    },
    {
      title: "Family Relationships",
      src: require("~/assets/images/values/family.svg"),
      flex: 6,
      id: "7",
      importance: "",
      effectiveness: "",
    },
    {
      title: "Social Relationships",
      src: require("~/assets/images/values/social.svg"),
      flex: 6,
      id: "8",
      importance: "",
      effectiveness: "",
    },
    {
      title: "Intimate Relationships",
      src: require("~/assets/images/values/intimate.svg"),
      flex: 6,
      id: "9",
      importance: "",
      effectiveness: "",
    },
    {
      title: "Parenting",
      src: require("~/assets/images/values/parenting.svg"),
      flex: 6,
      id: "10",
      importance: "",
      effectiveness: "",
    },
  ],
})

export const getters = {
  getCards: (state) => {
    return state.cards
  },
}

export const mutations = {
  updateEffectiveness(state, effectiveness) {
    state.cards.effectiveness = effectiveness
  },
  updateImportance(state, importance) {
    state.cards.importance = importance
  },
}

最后，这是我的_importance.vue代码（为了避免混乱，我只会显示其中一个输入页面）

<template>
  <div id="page__home">
    <v-row dense>
      <v-col cols="12">
        <h1 class="card__header">
          {{ card.title }}
        </h1>
        <v-card class="question card__text pa-sm-5 py-5 px-2">
          <v-row>
            <v-col cols="12">
              <h2 class="my-10">Importance</h2>
              <p>
                Now that you have listed some keywords that represent your
                values in this life domain for you personally, the next step is
                to
                <b>rate the importance</b> of these values as a whole, at this
                stage in your life.<br /><br />
                From 0 - 10, how important are these values to you?
                <br />
                {{ importance }}
              </p>
            </v-col>
            <v-col cols="12">
              <v-divider class="my-2"></v-divider>
            </v-col>
            <v-col cols="12">
              <v-row>
                <v-subheader>Not at all</v-subheader>
                <v-spacer></v-spacer>
                <v-subheader>Extremely</v-subheader>
              </v-row>
              <v-slider
                v-model="importance"
                class="my-10 mx-5"
                thumb-label="always"
                min="0"
                max="10"
              >
              </v-slider>
            </v-col>
          </v-row>
          <div class="m-2 text-center pb-10">
            <nuxt-link :to="`../${card.id}`">
              <v-btn color="primary" class="mx-5" dark large>Back</v-btn>
            </nuxt-link>
            <nuxt-link :to="`effectiveness/${card.id}`">
              <v-btn color="primary" class="mx-5" dark large>Next</v-btn>
            </nuxt-link>
          </div>
        </v-card>
      </v-col>
    </v-row>
  </div>
</template>

<script>
import { mapGetters } from "vuex"
export default {
  data() {
    return {
      id: this.$route.params.importance,
      //importance: "",
    }
  },
  computed: {
    ...mapGetters("cards", ["getCards"]),
    //...mapState(["getCards"]),
    card() {
      return this.getCards.find((el) => el.id === this.id)
    },
    importance: {
      get() {
        return this.getCards.importance
      },
      set(value) {
        this.$store.commit("cards/updateImportance", value)
      },
    },
  },
}
</script>

似乎，在Vue js开发工具中查看时，滑块上的输入值将指向更高级别的对象，而不是该特定生命周期内的对象（如果有的话）。

card：Object 有效性：“” 弹性：6 id：“ 1” 重要性：”” src：“ / _ nuxt / assets / images / values / growth.svg” 标题：“个人成长” 重要性：4

Vue Dev tools computed view

但是，我是VueJS（状态管理）和Comp Sc的新手，所以我想知道如何在card.id中将输入设置为重要性数据。由于路由系统通过获取商店中每张卡的cards.id起作用。

感谢您的帮助，我希望它能帮您清除。...让我知道是否可以扩展一下。

谢谢