业务需求：查询到所有的商品列表，根据商品的状态将其放入不同的表格
解决方案：
1、使用vue的过滤器
2、使用vuex的getters
目录结构：
App.vue文件
<template>
<div id="app">
<!-- 显示所有的商品 -->
<div class="listOne">
<p>所有商品</p>
<ul v-for='item in products' :key='item.id'>
<li>{{item.name}}</li>
<li>{{item.status}}</li>
</ul>
</div>
<!-- 显示已过期的商品 -->
<div class="listTwo">
<p>过期商品</p>
<!-- 将状态 已过期 作为参数传递给productFilter -->
<ul v-for='item in productFilter("已过期")' :key='item.id'>
<li>{{item.name}}</li>
<li>{{item.status}}</li>
</ul>
</div>
</div>
</template>
<script>
import {mapState,mapGetters} from 'vuex'
export default {
data(){
return{
}
},
created(){
},
computed:{
...mapState(['products']),
...mapGetters(['productFilter'])
},
methods:{
}
}
</script>
<style scoped>
#app div{
width: 200px;
float: left;
}
</style>
store/index.js文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
// 模拟数据，后期可替换为从后台获取的数据
products:[{
id:1,
name:'牛奶',
status:'已过期'
},{
id:2,
name:'咖啡',
status:'未过期'
},{
id:3,
name:'雪碧',
status:'已过期'
},{
id:4,
name:'奶茶',
status:'未过期'
}]
},
getters:{
productFilter(state){
return (status)=>{
return state.products.filter(item => {
// item为products中的每一个对象，将其status与vue页面传过来的参数进行比较，相等就返回
return item.status === status
})
}
}
},
mutations: {
},
actions: {
},
})
页面效果
