Vue - Vuex - getters的使用详解

---

一、Getters基本使用

类似于vue里面的计算属性

二、需求 : 显示counter的平方

2.1 定义计算属性

import Vue from 'vue'
import Vuex from 'vuex'

// 1. 安装插件
Vue.use(Vuex)

// 2. 创建对象
const store = new Vuex.Store({
  // 存放状态相关的数据
  state: {
    counter: 100
  },
  getters: {
    powers(state) {
      return state.counter * state.counter
    }
  }
})

// 3. 导出
export default store

2.2 使用计算属性

App.vue

<template>
  <div id="app">
    <h2>平方: {{$store.getters.powers}}</h2>
  </div>
</template>

<script>
  import Home from './components/Home.vue'

  export default {
    name: 'App',
  }
</script>

<style>
</style>

三、需求二 : 显示students里面年龄大于20的学生的信息, 并显示对应的人数

index.js

import Vue from 'vue'
import Vuex from 'vuex'

// 1. 安装插件
Vue.use(Vuex)

// 2. 创建对象
const store = new Vuex.Store({
  // 存放状态相关的数据
  state: {
    students: [{
     id: 110,
     name: '张三',
     age: 20 
    },
    {
      id: 111,
      name: '张四',
      age: 21 
    }, 
    {
    id: 112,
    name: '张五',
    age: 22 
    }]
  },
  getters: {
    // 筛选年龄大于20岁的学生
    more20stu(state) {
      return state.students.filter(s => s.age > 20)
    },
    // 计算年龄大于20岁的学生的人数
    more20stuLength(state, getters) {
      return getters.more20stu.length
    }
  }
})

// 3. 导出
export default store

3.1 显示

Home.vue

<template>
  <div>
    <h3>{{this.$store.getters.more20stu}}</h3>
    <h2>{{this.$store.getters.more20stuLength}}</h2>
  </div>
</template>

<script>
  export default {
    name: 'Home'
  }
</script>

<style>

</style>

四、需求三 : 显示students里面年龄大于age的学生的信息, age让使用者传入

index.js

import Vue from 'vue'
import Vuex from 'vuex'

// 1. 安装插件
Vue.use(Vuex)

// 2. 创建对象
const store = new Vuex.Store({
  // 存放状态相关的数据
  state: {
    students: [{
     id: 110,
     name: '张三',
     age: 20 
    },
    {
      id: 111,
      name: '张四',
      age: 21 
    }, 
    {
    id: 112,
    name: '张五',
    age: 22 
    }]
  },
  getters: {
    // 筛选年龄大于age岁的学生
    more20stuAge(state) {
      return function(age) {
        return state.students.filter(s => s.age > age)
      }
    },
  }
})

// 3. 导出
export default store

4.1 使用

<template>
  <div>
    <h1>{{this.$store.getters.more20stuAge(20)}}</h1>
  </div>
</template>

<script>
  export default {
    name: 'Home'
  }
</script>

<style>

</style>