vuex过滤器getters

业务需求：查询到所有的商品列表，根据商品的状态将其放入不同的表格

解决方案：

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: {

  },
 
})

页面效果