[Vuex系列] - Vuex中的getter的用法

时间 2019-12-07

标签 vuex 系列 getter 用法繁體版

原文原文链接

Vuex 容许咱们在store中定义“getter”（能够认为是store的计算属性）。就像计算属性同样，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被从新计算。vue

getters的做用

对于getters的理解主要做用是对state属性进行计算，能够理解相似于Vue中computed。接下来让我经过一个例子如何使用这两个功能的。vuex

仍是以咱们上一讲的累加器为例，在getter.js中增长getCount，内容以下：缓存

const getters = {
  getNum (state) {
    return state.num
  },
  getCount (state) {
    return state.count
  }
}

export default getters

复制代码

在组件中如何使用bash

<template>
  <div class="getter">
    {{ count }}
    <button @click="add">ADD State</button>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  computed: {
    count () {
      return this.$store.getters.getCount
    }
  },
  methods: {
    add () {
      this.$store.commit('add')
    }
  }
}
</script>

复制代码

this.$store调用

this.$store.getters.getCount
复制代码

引用store来调用

import store from '@/store/store.js'

store.getters.getCount
复制代码

mapGetters 辅助函数

<template>
  <div class="getter">
    {{ getCount }}
    <button @click="add">ADD State</button>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data () {
    return {}
  },
  computed: {
    ...mapGetters(['getCount'])
  },
  methods: {
    add () {
      this.$store.commit('add')
    }
  }
}
</script>
复制代码

1、[Vuex系列] - 初尝Vuex第一个例子函数

2、[Vuex系列] - 细说state的几种用法post

3、[Vuex系列] - Mutation的具体用法ui

4、[Vuex系列] - getters的用法this

5、[Vuex系列] - Actions的理解之我见spa

6、[Vuex系列] - Module的用法（终篇）code