5-3.vuex的getters

1.getters的作用

vuex的getters属性所扮演的角色基本和vue的computed属性相同，都是计算属性，当你需要对原始数据进行过滤或计算时可以使用该属性进行处理。其可以接受两个参数，第一个是state,第二个是getters.
可分为两种方式使用：

• 不需要传参：通过属性访问
• 需要传参：通过方法访问

2.不传参的使用方式

1.代码展示

vuex的index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 10
  },
  getters: {
    testCount1(state) {
      console.log("getters");
      return state.count*state.count;
    },
    testCount2(state,getters) {
      return getters.testCount1*state.count;
    }
  },
  mutations: {

  },
  actions: {
  },
  modules: {
  }
})

Home.vue

<template>
  <div class="home">
    <h1>这是home页面</h1>
    <p>以属性的方式展示count的平方：{{$store.getters.testCount1}}</p>
    <p>以属性的方式展示count的立方：{{$store.getters.testCount2}}</p>
  </div>
</template>

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

2.过程分解

3.结果展示

3.传参的使用方式

1.代码展示

vuex的index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 10
  },
  getters: {
    testCount1(state, getters) {
      return (num) => {
        return state.count * num;
      }
    },
    testCount2(state, getters) {
      return (num1, num2) => {
        return state.count * (num1 + num2);
      }
    }
  },
  mutations: {

  },
  actions: {
  },
  modules: {
  }
})

Home.vue

<template>
  <div class="home">
    <h1>这是home页面</h1>
    <p>以方法的方式根据写入数据展示数据：{{$store.getters.testCount1(18)}}</p>
    <p>以方法的方式根据写入数据展示数据：{{$store.getters.testCount2(25,19)}}</p>
  </div>
</template>

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

2.过程分解