2021-12-16 vue移动端卖座电影项目(十三) 使用vuex的getter筛选comingSoon的显示电影数

1.Getter:把Store中数据处理形成新数据

Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 中的计算属性。
Store 中数据发生变化，Getter 的数据也会跟着变化。

2.使用vuex的getter筛选comingSoon的显示电影数

store/index.js

 state: {
        //自定义共享状态
        comingList: [],
        getComingSoonMoive: []
    },
    mutations: { //唯一修改状态的位置
...
    },
    getters: {
        getComingSoonMovie(state) {
            return state.comingList.filter((item, index) => index <= 1); //只显示下标小于等于1的:即显示两部
        }
    },

comingSoon.vue

<!-- <li v-for="data in this.$store.state.comingList" :key="data.filmId" @click="handleChangePage(data.filmId)"> -->
<li v-for="data in $store.getters.getComingSoonMovie" :key="data.filmId" @click="handleChangePage(data.filmId)">
...
 </li>

3.结果