vuex————getters属性

1.概念：getter s 相当于之前组件中学习的计算属性 , getters属性主要是对于state中数据的一种过滤

2.使用场景： 在项目开发中，有时候希望对state中的某个属性 在多个组件中展示出不同状态

3.书写位置：与state同级

 

1）store.js

import Vue from 'vue';
import Vuex from 'vuex';
// 在vue中使用vuex
Vue.use(Vuex);
// 导出  让外部使用实例化的store对象
export let store=new Vuex.Store({
    // 在state里面保存需要保存的数据
   state:{
       arr:[
           {id:1,name:"哈哈",age:12},
           {id:2,name:"嘻嘻",age:32},
           {id:3,name:"呵呵",age:62},
           {id:4,name:"噢噢",age:89}
       ]
   },
   getters:{
      //    取出id大于2的数据
    //   state就是state这个属性
       newarr1(state){
           var obja=state.arr.filter((v,i)=>{
               if(v.id>2){
                   return v;
               }
           })
           return obja;
       },
    //    取出id小于等于2的数据
       newarr2(state){
           var objb=state.arr.filter((v,i)=>{
               if(v.id<=2){
                   return state.arr[i];
               }
           })
           return objb;
       }
   }
})

 

2）与使用state相同在组件中的计算属性当中使用 this.$store.getters.xxx来进行调用

vuex的Getter特性是？

一、getters 可以对State进行计算操作，它就是Store的计算属性

二、 虽然在组件内也可以做计算属性，但是 getters 可以在多组件之间复用

三、 如果一个 状态 （数据） 只在一个组件内 使用，是可以不用getters