vuex中mapState和mapGetter

Question

疑问：使用vuex，用mapGetter可以获取到仓库中的数据，而mapState获取不到，为什么？

Content.vue
<template>
  <div class="questions" id="question-display">
    <div class="question-box" v-for="(question, id) in dataList" :key="id">
      <h1>✒</h1>
      <p v-for="(quiz, index) in question.quiz" :key="index">{{ quiz }}</p>
      <div class="question-buttons">
        <button
          class="question-button"
          v-for="(option, index) in question.options"
          :key="index"
          @click="checkAnswer(id, option, index + 1, question.correct)"
          :disabled="clicked.includes(option)"
        >
          {{ option }}
        </button>
      </div>
      <div
        class="answer-display"
        :class="answer[id] === 'Correct!' ? 'correct' : 'wrong'"
      >
        {{ answer[id] }}
      </div>
    </div>
  </div>
</template>

<script>
import bus from "../utils/bus"
import { mapGetters, mapState } from "vuex"

export default {
  name: "Content",
  data() {
    return {
      score: 0,
      clicked: [],
      answer: [],
    }
  },
  mounted() {
    this.$store.dispatch("getDataList")
  },
  computed: {
    ...mapState(["dataList"]),//获取不到数据
    ...mapGetters(["dataList"]),//获取的到数据
  },
  methods: {
    checkAnswer(id, option, optionIndex, correctIndex) {
      if (optionIndex === correctIndex) {
        this.score++
        this.clicked.push(option)
        bus.$emit("scoreHandler", this.score)
        this.answer[id] = "Correct!"
      } else {
        this.score--
        this.clicked.push(option)
        bus.$emit("scoreHandler", this.score)
        this.answer[id] = "Wrong!"
      }
    },
  },
}
</script>

<style scoped>
.questions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.question-box {
  background-color: rgb(21, 21, 21);
  margin: 15px auto;
  width: 240px;
  color: rgb(230, 230, 230);
  border-radius: 10px;
  padding: 0 40px 10px 40px;
}
.question-box h1 {
  text-align: left;
  color: rgb(178, 65, 178);
}
.question-buttons {
  display: flex;
  flex-direction: row;
}

.question-button {
  margin: 5px auto;
  padding: 10px 20px;
  border-radius: 20px;
  border: none;
  background-color: rgb(75, 134, 111);
  color: white;
}
.question-button:disabled {
  background-color: rgb(97, 95, 95);
  color: rgb(158, 154, 154);
}
.answer-display {
  height: 50px;
  display: flex;
  justify-content: center;
  text-align: center;
}
.correct {
  color: rgb(211, 211, 117);
}
.wrong {
  color: rgb(211, 134, 117);
}
</style>

vuex的index.js
import { getWordContent } from "../../api"

const state = {
  dataList: [],
}
const mutations = {
  GETDATALIST(state, dataList) {
    state.dataList = dataList
  },
}
const actions = {
  async getDataList({ commit }) {
    let res = await getWordContent()
    if (res.code === 200) {
      commit("GETDATALIST", res.data)
    }
  },
}
const getters = {
  dataList(state) {
    return state.dataList
  },
}
export default {
  state,
  mutations,
  actions,
  getters,
}

获取的数据
 [
    {
      "quiz": ["value", "estimate", "evaluate"],
      "options": ["jury", "assess"],
      "correct": 2,
      "id": 1
    },
    {
      "quiz": ["close", "near", "next"],
      "options": ["trace", "adjacent"],
      "correct": 2,
      "id": 2
    },
    {
      "quiz": ["foreign", "national", "ethnic"],
      "options": ["mad", "exotic"],
      "correct": 2,
      "id": 3
    },
    {
      "quiz": ["assume", "insight", "weather"],
      "options": ["forecast", "sustainable"],
      "correct": 1,
      "id": 4
    },
    {
      "quiz": ["fast", "quick", "prompt"],
      "options": ["charity", "rapid"],
      "correct": 2,
      "id": 5
    }
  ]

Answer 1

我们可以理解成他是和mapState一样，都是对state里面的参数进行计算，并返回相应的值，所以我们平常看到的mapState.mapGetters都是在computed属性里面，但是和mapState有点不同的是，mapState是仅对state里面的参数进行计算并返回，而mapGetters是对state参数派生出的属性进行计算缓存，比如计算state中cartList数组的长度或者对他的参数进行筛选
————————————————
版权声明：本文为CSDN博主「Little_Pig_Bug」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Little_Pig_Bug/article/details/82383652