vuex中getters的基本用法解读

下面就让我为你详细讲解“vuex中getters的基本用法解读”的完整攻略。

什么是Vuex中的Getters

在Vuex中，Getters是一个状态的派生属性，可以将多个状态组合成一个属性。Getters有点类似于Vue组件中的计算属性，只不过它是针对Vuex中的状态而言的。

Getters的基本用法

在Vuex中，可以通过store对象上的getters属性来定义一些派生状态，每当它所依赖的状态变化时，都会自动重新求值。下面是一个定义Getters的基本语法：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    getCount: state => state.count
  }
})

Getters的示例

下面通过两个示例来解释Getters的使用。

示例1：计算购物车中商品的总价

首先，在Vuex的store中定义一个cart数组，cart数组存储的是商品的信息，其中每个商品对象包含了商品的id、名称、价格和数量等信息。这里以对象的方式定义一个商品对象：

const store = new Vuex.Store({
  state: {
    cart: [
      {id: 1, name: '商品1', price: 100, num: 2},
      {id: 2, name: '商品2', price: 200, num: 1},
      {id: 3, name: '商品3', price: 300, num: 3},
    ]
  },
  getters: {
    totalPrice: state => {
      let total = 0
      for(let item of state.cart) {
        total += item.price * item.num
      }
      return total
    }
  }
})

在上面的代码中，我们定义了一个Getters函数，名称为totalPrice，它的作用是求购物车中所有商品的总价，计算方式是通过遍历cart数组来累加每个商品的价格和数量得到的。

接着，在Vue组件中可以通过store.getters调用totalPrice函数来获取购物车的总价：

<template>
  <div>
    <span>购物车中商品的总价：{{totalPrice}}</span>
  </div>
</template>

<script>
  export default {
    computed: {
      totalPrice() {
        return this.$store.getters.totalPrice
      }
    }
  }
</script>

上面的代码中，我们在计算属性中调用了store.getters.totalPrice来获取购物车中所有商品的总价，最终在模板中显示出来。

示例2：获取购物车中商品的数量

除了可以计算总价之外，我们还可以通过Getters来获取购物车中商品的数量，具体实现如下：

const store = new Vuex.Store({
  state: {
    cart: [
      {id: 1, name: '商品1', price: 100, num: 2},
      {id: 2, name: '商品2', price: 200, num: 1},
      {id: 3, name: '商品3', price: 300, num: 3},
    ]
  },
  getters: {
    totalNum: state => {
      let num = 0
      for(let item of state.cart) {
        num += item.num
      }
      return num
    }
  }
})

在上面的代码中，我们定义了一个Getters函数，名称为totalNum，它的作用是获取购物车中所有商品的数量，计算方式是通过遍历cart数组来累加每个商品的数量得到的。

同样，在Vue组件中可以通过store.getters调用totalNum函数来获取购物车中所有商品的数量：

<template>
  <div>
    <span>购物车中商品的数量：{{totalNum}}</span>
  </div>
</template>

<script>
  export default {
    computed: {
      totalNum() {
        return this.$store.getters.totalNum
      }
    }
  }
</script>

上面的代码中，我们在计算属性中调用了store.getters.totalNum来获取购物车中所有商品的数量，最终在模板中显示出来。