首页 > 其他 > 详细

vuex的getters处理数据

时间:2019-04-28 01:03:50      阅读:191      评论:0      收藏:0      [点我收藏+]

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>

结果:

技术分享图片

 

vuex的getters处理数据

原文:https://www.cnblogs.com/luguankun/p/10781120.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!