Vue/Vuex (getters) 派生状态计算属性 理解和使用方法、辅助函数mapGetters

一. getters派生状态计算属性

语法:

// 定义  --> main.js

const store =  new Vuex.store({
  getters: {
    计算属性名: function(state) {
      return 要返回的值
    }
  }
})

//使用 --> App.vue

<标签>{{ $store.getters.计算属性名 }} 

作用: 用于state中存储的数据进行过滤操作

理解: 他相当于vue的计算属性 每当state中的值变化时 他会自动更新 

参数: 参数一: state属性 

注意:

1.函数里的第一个参数永远都是 state

2.getter 在通过属性访问时作为vue的响应式系统的一部分缓存其中的 getter会暴露为 state.getter 对象 

说明: 在store仓库中 state是用来存放数据的 如果要对数据进行处理输出 比如数据要过虑 可以写在计算属性中 但是很多组件都使用这个过滤后的数据  可以考虑把这个数据提出来共享 

二.辅助函数mapGetters

语法: 

// 导入

import { mapGetters } from 'vuex'

//展开

 computed: {
    ...mapState(['state内函数名'])
  }

//使用

<标签> {{ state内函数名 }}

作用: mapGetters 是vuex提供的将 store中 getter眏射到组件计算属性中的辅助函数