zoukankan      html  css  js  c++  java
  • getters传参

    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 => {
                    return {
                        name: ele.name + "__技术部",
                        age: ele.age + 10
                    }
                 
                })
                return item;
            },
            getAgeByName:(state)=>(name)=>{
                var items = state.prod.find(ele=>{
                    if(ele.name === name){
                        return ele.age;
                    }
                })
                return items.age;
            }
    
        },
         mutations: {
            getValue(state, num) {
                var items = state.prod.map(ele => {
                    return {
                        age: ele.age += num
                    }
                })
                return items;
            }
        },
        actions: {
            getActionsValue(context, playload) {
                setTimeout(function () {
                    context.commit("getValue", playload);
                }, 2000)
            }
        }
    })

    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 getVal">
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
            </tr>
          
        </table>
         <hr>
            <button @click="getMutationsMethds(100)">mutations get</button>
            <hr>
            <button @click="getActionsMethods(200)">actions get</button>
    </div>
    </template>
    <script>
    export default {
      name: "Home",
      data () {
        return {
        };
      },
      computed:{
          getValue(){
            return   this.$store.state.prod;
          },
          getVal(){
            return   this.$store.getters.getValue;
          }
      },
      methods:{
          getMutationsMethds(num){
              this.$store.commit("getValue",num);
          },
          getActionsMethods(amount){
              this.$store.dispatch("getActionsValue",amount);
          }
      },
      created(){
         console.log( this.$store.getters.getAgeByName("zs"));   // 12
         
      }
    }
    </script>
    <style lang="css" scoped>
    </style>
  • 相关阅读:
    javascript模拟jQuery封装委托事件,兼容IE
    javascript事件有哪些?javascript的监听事件
    javascript阻止事件冒泡的兼容写法及其相关示例
    Spring的特点
    异常以及为什么要学异常
    Windows下干活儿辅助软件
    Oracle EBS SLA 详解
    EBS获取并发程序Trace File
    EBS Custom Password Rules
    Oracle PLSQL读取(解析)Excel文档
  • 原文地址:https://www.cnblogs.com/luguankun/p/10809431.html
Copyright © 2011-2022 走看看