快捷導(dǎo)航

vuex學(xué)習(xí)進(jìn)階篇之getters的使用教程

更新時(shí)間：2022年10月19日 15:34:48 作者：Jay丶千玨

getters用于獲取state里的數(shù)據(jù),它類似于計(jì)算屬性,如果要獲取的數(shù)據(jù)并沒有發(fā)生變化的話,就會返回緩存的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于vuex學(xué)習(xí)進(jìn)階篇之getters的使用教程,需要的朋友可以參考下

1.設(shè)置gettes 事件

index.js

dict.js

我們在index.js中設(shè)置了兩個(gè)getters事件，在子模塊dict.js中設(shè)置了兩個(gè)getters事件

2.使用調(diào)用

<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: {
    //   第一種形式 數(shù)組形式
    ...mapGetters(["getterAge", "getterAgeCompare"]), //使用對象展開運(yùn)算符將 getter 混入 computed 對象中
    // 第二種方式 對象形式
    ...mapGetters({
      getterDict: "dict/getterDict",
      getterDictCompare: "dict/getterDictCompare",
    }),
  },
  methods: {},
};
</script>