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

  },
 
})

頁面效果