Vue项目实现点击添加电影至收藏夹功能新手问题求助

1. 先修改Vuex Store代码 #

你现在的store里缺少收藏状态的存储、修改方法和对应的getter，修改后代码如下：

state: {
  // 原有所有电影列表保留
  items: [
    {id: 1,
    title:'Free guy',  
    image :'Free-Guy.png',
    decsription :'A tour stop becomes a matter of life and death for a famous comic when the fallout from a night with his brother threatens to destroy everything he is built.'},  
    {id: 2,
    title:'true story',  
    image :'add.jpg',
    decsription :'A tour stop becomes a matter of life and death for a famous comic when the fallout from a night with his brother threatens to destroy everything he is built.'},  
    {id: 3,
    title:'starwars',  
    image :'st.jpeg',
    decsription :'A tour stop becomes a matter of life and death for a famous comic when the fallout from a night with his brother threatens to destroy everything he is built.'},  
  ],
  // 新增：存已收藏的电影id数组
  favIds: []
},
mutations: {
  // 新增：切换收藏状态的方法，避免重复添加
  toggleFav(state, movieId) {
    const index = state.favIds.findIndex(id => id === movieId)
    if (index > -1) {
      state.favIds.splice(index, 1)
    } else {
      state.favIds.push(movieId)
    }
  }
},
getters :{
  // 原有所有电影getter保留
  items(state) {
    return state.items
  },
  // 新增：返回已收藏的完整电影列表
  favMovies(state) {
    return state.items.filter(movie => state.favIds.includes(movie.id))
  }
},

2. 修改首页代码 #

你现在的favs方法只做了跳转，没有把选中的电影存入收藏，修改methods部分即可：

export default {
  data () {
    return {}
  },
  methods: {
    // 接收传过来的电影id
    favs(movieId){
      // 先调用store的mutation把id存入收藏列表
      this.$store.commit('toggleFav', movieId)
      // 再跳转收藏页
      this.$router.push({
        path: '/fav'
      })
    }
  },
  computed:{
    items(){
      return this.$store.state.items;
    }
  }
}

3. 修改收藏页代码 #

你现在的收藏页计算属性逻辑错误，也没有正确引用store里的收藏列表，修改template和script部分：

<template>
  <div>
 <v-container>
   <v-layout row wrap>
     <!-- 这里遍历favMovies而不是原来的items -->
     <v-flex lg4
   v-for="item in favMovies" :key="item.id"
     >
       <v-card
    :loading="loading"
    class="mx-auto my-12"
    max-width="374"
  >
    <template slot="progress">
      <v-progress-linear
        color="deep-purple"
        height="10"
        indeterminate
      ></v-progress-linear>
    </template>

    <v-img
      height="250"
      :src="item.image"
    ></v-img>

    <v-card-title>{{item.title}}</v-card-title>

    <v-card-text>
      <v-row
        align="center"
        class="mx-0"
      >
        <v-rating
          :value="4.5"
          color="amber"
          dense
          half-increments
          readonly
          size="14"
        ></v-rating>

      </v-row>
    </v-card-text>

    <v-divider class="mx-4"></v-divider>

    <v-card-title>Description</v-card-title>

    <v-card-text>
     {{item.decsription}}
    </v-card-text>

    <v-card-actions>
      <v-btn class="ml-2"
        color="deep-purple lighten-2"
        text
        <!-- 不需要取消收藏功能可以删掉这个按钮 -->
        @click="removeFav(item.id)"
      >
       取消收藏
      </v-btn>
       <v-btn class="ml-auto"
        color="deep-purple lighten-2"
        text
        @click="later(item.id)"
      >
       Add to Watch Later
      </v-btn>
    </v-card-actions>
  </v-card>
  
     </v-flex>
     
   </v-layout>
 </v-container>
  </div>
</template>
<script>
export default {
    data(){
        return {
            // 你原来用到了loading，这里给个默认值避免报错
            loading: false
        }
    },
    methods: {
      // 可选：取消收藏的方法
      removeFav(movieId) {
        this.$store.commit('toggleFav', movieId)
      }
    },
    computed : {
        favMovies(){
          // 直接取store里的收藏电影列表即可
          return this.$store.getters.favMovies
        }
    }
    
}
</script>

修改完成后即可实现点击首页收藏按钮、跳转后收藏页展示对应电影的需求，如果需要刷新页面收藏不丢失，可自行补充localStorage做持久化存储。

内容的提问来源于stack exchange，提问作者narin