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，要么在数据方法中定义它，要么将项目替换为 $store.state.items!

Answer 2

如果我了解您正在寻找的行为，请尝试以下操作：在 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
    },

然后当您点击“添加到收藏夹”时，使用 mutation

将此布尔值的状态更改为 true

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以仅查看最喜欢的电影

vue 将电影添加到收藏夹

Vue add movies to favourites

javascript

state

store

vue.js

vuex