vuex的getters处理数据

getters是用来处理state里的数据的

getters传递一个值state

例子:

store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
    state:{
        prod:[
            {name:"zs",age:12},
            {name:"ls",age:13},
            {name:"ww",age:14},
        ]
    },
    getters:{
        getValue(state){
          var item =   state.prod.map((ele,index)=>{
                return {
                    name:ele.name+"__技术部",
                    age:ele.age+10
                }
            })
            return item ;
        }
    }
})

 

Home.vue

<template>
<div>
    <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr v-for="(item,i) in getValue">
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
        </tr>
    </table>
    <hr>
    <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr v-for="(item,i) in getItem">
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
        </tr>
    </table>
</div>
</template>
<script>
export default {
  name: "Home",
  data () {
    return {
    };
  },
  computed:{
      getValue(){
         return  this.$store.state.prod;
      },
      getItem(){
          return this.$store.getters.getValue
      }
  }
}
</script>
<style lang="css" scoped>
</style>

结果：