• 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>

    结果:

  • 相关阅读:
    vue自定义指令directive
    vue组件:input数字输入框
    vue中用数组语法绑定class
    vue中检测数组改变
    node绝对和相对模块
    判断拖放
    媒体查询 和rem布局
    JSON字符串对象相互转换
    深度封装typeof判断
    类数组
  • 原文地址:https://www.cnblogs.com/luguankun/p/10781120.html
Copyright © 2020-2023  润新知