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>
原文:https://www.cnblogs.com/luguankun/p/10809431.html