vuex学习进阶篇之getters的使用教程

<template>
  <div>
    <div>
      <div>{{ $store.getters.getterAge }}</div>
      <div>{{ $store.getters.getterAgeCompare(18) }}</div>
      <div>{{ $store.getters.getterAgeCompare(10) }}</div>
      /
      <div>{{ getterAge }}</div>
      <div>{{ getterAgeCompare(18) }}</div>
      <div>{{ getterAgeCompare(10) }}</div>
    </div>
    -----------------------------------------------------------------------------
    <div>
      <div>{{ $store.getters["dict/getterDict"] }}</div>
      <div>{{ $store.getters["dict/getterDictCompare"](1) }}</div>
      <div>{{ $store.getters["dict/getterDictCompare"](2) }}</div>
      <div>{{ $store.getters["dict/getterDictCompare"](3) }}</div>
      /
      <div>{{ getterDict }}</div>
      <div>{{ getterDictCompare(1) }}</div>
      <div>{{ getterDictCompare(2) }}</div>
      <div>{{ getterDictCompare(3) }}</div>
    </div>
  </div>
</template>
 
<script>
import { mapGetters } from "vuex"; //第二种方式 1.引入
export default {
  data() {
    return {};
  },
  computed: {
    //   第一种形式 数组形式
    ...mapGetters(["getterAge", "getterAgeCompare"]), //使用对象展开运算符将 getter 混入 computed 对象中
    // 第二种方式 对象形式
    ...mapGetters({
      getterDict: "dict/getterDict",
      getterDictCompare: "dict/getterDictCompare",
    }),
  },
  methods: {},
};
</script>