Vue中的getters属性的用法详解

Vue中的getters属性是一种抽象的访问store中的state的方式，它提供了一种简便的方式来访问store中的数据。getters属性可以用于从store中获取状态，并以更加有意义的方式进行处理。

使用getters属性

在使用getters属性之前，我们需要先在store中定义getters属性，getters属性是一个函数，它接受state作为参数，并返回一个经过处理的状态。

// store.js
const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    count(state) {
      return state.count * 2
    }
  }
})

定义完getters属性后，我们就可以在组件中使用它了，我们可以通过mapGetters辅助函数将store中定义的getters映射到当前组件的computed计算属性中：

// App.vue
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['count'])
  }
}

我们就可以在组件中使用count来获取state.count的值，它的值为state.count的两倍：

// App.vue
export default {
  computed: {
    ...mapGetters(['count'])
  },
  methods: {
    handleClick() {
      console.log(this.count) // 2
    }
  }
}

组合getters属性

在定义getters属性时，我们可以使用其他getters属性来处理状态，这样就可以实现复杂的状态处理：

// store.js
const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    count(state) {
      return state.count * 2
    },
    doubleCount(state, getters) {
      return getters.count * 2
    }
  }
})

在上面的例子中，我们定义了一个doubleCount的getters属性，它的值是count的两倍，我们可以在组件中使用mapGetters辅助函数将doubleCount映射到当前组件的computed计算属性中：

// App.vue
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['doubleCount'])
  },
  methods: {
    handleClick() {
      console.log(this.doubleCount) // 4
    }
  }
}

参数传递

除了可以使用state和getters，我们还可以在定义getters属性时传入参数，这样我们就可以根据参数来过滤状态：

// store.js
const store = new Vuex.Store({
  state: {
    list: [
      { name: 'Tom', age: 18 },
      { name: 'Jack', age: 20 },
      { name: 'Bob', age: 22 }
    ]
  },
  getters: {
    getListByAge(state, age) {
      return state.list.filter(item => item.age > age)
    }
  }
})

参数传递之后，我们可以在组件中使用mapGetters辅助函数将getListByAge映射到当前组件的computed计算属性中：

// App.vue
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['getListByAge'])
  },
  methods: {
    handleClick() {
      console.log(this.getListByAge(20)) // [{ name: 'Bob', age: 22 }]
    }
  }
}

Vue中的getters属性是一种抽象的访问store中的state的方式，它提供了一种简便的方式来访问store中的数据。getters属性可以用于从store中获取状态，并以更加有意义的方式进行处理。我们可以使用mapGetters辅助函数将store中定义的getters映射到当前组件的computed计算属性中，就可以在组件中使用getters属性来获取状态，同时我们还可以组合getters属性，并且可以传入参数来过滤状态。

千锋教育是高品质web前端培训机构，千锋教育拥有大量实力web前端培训讲师，提供优质的web培训课程，web前端培训，欢迎报名千锋教育。