vuex 核心概念getters

一、getters计算属性

也有一个类似缓存的效果，即把之前处理过的数据结果缓存到堆。
应用场景：当多个组件需要对数据进行展示/处理时，在没有vuex的场景下，可能会在每个组件内都写一个展示的函数，但是随着组件增多，重复的代码太多，此时，可以用getters属性，把展示的函数写在getters里面，多个组件要用这个方法时，直接从vuex的getters里面取。

基本使用：

// /src/store/index.js
const store = new vueX.store({
    
    
	state:{
    
     name: 'a'},
	getters:{
    
    
		displayData(state){
    
    
			return state.name+ '123';
		}
	}
});

// /src/components/app.vue
<template>
  <div class="hello">
  //显示a123
     <h1>{
    
    {
    
     $store.getters.displayData}}</h1> 
  </div>
</template>

嵌套使用：

// /src/store/index.js
const store = new vueX.store({
    
    
	state:{
    
     name: 'a'},
	getters:{
    
    
		displayData(state){
    
    
			return state.name+ '123';
		},
		showLength(state,getters){
    
    
			return getters.displayData.length;
		}
	}
});

// /src/components/app.vue
<template>
  <div class="hello">
  //显示a123
     <h1>{
    
    {
    
     $store.getters.displayData}}</h1> 
  //显示4
     <h1>{
    
    {
    
     $store.getters.showLength}}</h1> 
  </div>
</template>

带参数用法：
默认下，getters是不能传参数的，可以使用闭包传？

// /src/store/index.js
const store = new vueX.store({
    
    
	state:{
    
     name: 'a'},
	getters:{
    
    
		displayData(state){
    
    
			return state.name+ '123';
		},
		nameEqual(state){
    
    
			return (name)={
    
     return state.name === name; };
		}
	}
});

// /src/components/app.vue
<template>
  <div class="hello">
  //显示a123
     <h1>{
    
    {
    
     $store.getters.displayData}}</h1> 
  //显示false
     <h1>{
    
    {
    
     $store.getters.nameEqual('a123')}}</h1> 
  </div>
</template>