详解Vuex中getters的使用教程

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

this.$store.getters.计算属性名           // 不分模块
this.$store.getters['模块名/计算属性名'] // 分模块

import { mapGetters } from 'vuex'
export default {
    computed: {
        // 不分模块
        ...mapGetters(['计算属性名'])
        
        // 分模块，不重命名计算属性
        ...mapGetters('模块名', ['计算属性名'])
        
        // 分模块，重命名计算属性
        ...mapGetters('模块名', {'新计算属性名': '旧计算属性名'})
    }
}

import Vue from 'vue';
import Vuex from 'vuex';
 
Vue.use(Vuex);
const counterStore = new Vuex.Store(
    {
        state: {
            count: 10
        },
 
        getters: {
            doubleCount(state) {
                return state.count * 2;
            }
        }
    }
);
 
export default counterStore;

<template>
  <div class="outer">
    <h3>父组件</h3>
    <component-b></component-b>
  </div>
</template>
 
<script>
import ComponentB from "./ComponentB";
 
export default {
  name: 'Parent',
  components: {ComponentB},
}
</script>
 
<style scoped>
.outer {
  margin: 20px;
  border: 2px solid red;
  padding: 20px;
}
</style>

<template>
  <div class="container">
    <h3>ComponentB</h3>
    <div>计数器的值：{{thisCount}}</div>
    <div>计数器的2倍：{{thisDoubleCount}}</div>
  </div>
</template>
 
<script>
export default {
  computed:{
    thisCount() {
      return this.$store.state.count;
    },
    thisDoubleCount() {
      return this.$store.getters.doubleCount;
    },
  }
}
</script>
 
<style scoped>
.container {
  margin: 20px;
  border: 2px solid blue;
  padding: 20px;
}
</style>

import Vue from 'vue'
import Router from 'vue-router'
import Parent from "../components/Parent";
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/parent',
      name: 'Parent',
      component: Parent,
    }
  ],
})