zoukankan      html  css  js  c++  java
  • 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>

    结果:

  • 相关阅读:
    return, break, continue
    equals 与 ==
    过滤器
    通过域名区分虚拟主机
    通过端口区分不同虚拟机
    Nginx实现反向代理
    Nginx安装
    poj2387 Til the Cows Come Home(Dijkstra)
    hdoj2544 最短路(Dijkstra || Floyd || SPFA)
    最小生成树
  • 原文地址:https://www.cnblogs.com/luguankun/p/10781120.html
Copyright © 2011-2022 走看看