Vue 将电影添加到收藏夹

Question

我有一个主页，其中有 3 部电影（从商店传递），每部电影都有一个添加到收藏页面按钮。所以我想要做的是当我点击将电影添加到收藏按钮并转到我的收藏页面时，电影应该在那里。如果我的代码不是最好的，我是 Vue 的新手，很抱歉。甚至文件建议也将不胜感激！

主页：

<template>
  <div>
 <v-container>
   <v-layout row wrap>
     <v-flex lg4
   v-for="item in items" :key="item.id"
     >
       <v-card
         
    
    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="favs(item.id)"
      >
       Add to Favs
      </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 {
     

   
      }
    },
    methods: {
       favs(){
       this.$router.push({
          path: '/fav'
        })
       }
    },
    computed:{
      items(){
        return this.$store.state.items;
      }
    }
  }
</script>

收藏页面：

template>
  <div>
 <v-container>
   <v-layout row wrap>
     <v-flex lg4
   v-for="item in items" :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="favs"
      >
       Add to Favs
      </v-btn>
       <v-btn class="ml-auto"
        color="deep-purple lighten-2"
        text
        @click="later"
      >
       Add to Watch Later
      </v-btn>
    </v-card-actions>
  </v-card>
  
     </v-flex>
    
    
     
   </v-layout>
 </v-container>
  </div>
</template>
<script>
export default {
    data(){
        return {
            
        }
    },
    computed : {
        fav(){
            let check= this.$store.getters.item.filter(f=>{
        return f.id == item.id
      })
      return check
      }
        }
    
}
</script>

商店：

 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.'},  
    
    ]
 
  },
  getters :{
   items(s) {
     return s.items
   }
  },

Answer 1

如果我了解您正在寻找的行为，请尝试以下操作： 在items 数组中创建一个fav 值。

items: [
    {
        id: 1,
        title: 'Free guy',
        image: 'Free-Guy.png',
        description: '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.',
        fav: false
    },
    {
        id: 2,
        title: 'true story',
        image: 'add.jpg',
        description: '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.',
        fav: false
    },
    {
        id: 3,
        title: 'starwars',
        image: 'st.jpeg',
        description: '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.',
        fav: false
    },

然后，当您单击添加到收藏时，将此布尔值的状态更改为 true，并使用 mutation

mutations {
    addToFav: (state, id) => {
         state.items[state.items.findIndex(item => item.id == id)].fav = true;
    }
}

在这里打电话给mutation

methods: {
    favs(id){
        this.$store.commit("addToFav", id)
        this.$router.push({
            path: '/fav'
        })
    }
},

在收藏页面中，您可以通过此收藏调用过滤后的存储项目，例如 Collbrothers

computed: {
    items(){
        return this.$store.state.items.filter(item => item.fav);
    }
}

或创建一个特定的getter 以仅查看喜欢的电影

Answer 2

您似乎从未在“收藏”页面中真正定义过items，要么在数据方法中定义它，要么将项目替换为$store.state.items！