Question

嗨，我正在商店js中进行一次get调用，并将其作为Movie.vue中的计算属性进行传递，当我刷新页面时，如果更改视图或返回索引，则将获得真实值。没有变化将保持不变。每次我都需要刷新页面以便从商店js访问新值。

<template>
    <div >
    <Navbar />
     <v-parallax
        dark
        src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg"
      >
        <v-layout
          align-center
          column
          justify-center
        >
          <h1 class="display-2 font-weight-thin mb-3">{{film_title}}</h1>
          <h4 class="subheading">{{film_tagline}}</h4>

        </v-layout>

      </v-parallax>
      <v-container fluid>
        <v-layout row>
         <v-flex xs10 sm6  md4 lg3 offset-sm1 style="position:absolute; top:350px;">
          <v-card>
            <v-img
              :src="'https://image.tmdb.org/t/p/original' + film_poster_path"
              aspect-ratio=".75" style="background-image-width:300px;"
            ></v-img>

            <v-card-title primary-title>
              <div>
                <h5 xs12 sm6 >
                      <v-chip color="orange" text-color="white" v-if="film_genres_1">
                      {{film_genres_1}}
                      <v-icon right>star</v-icon>
                  </v-chip>
                  <v-chip color="primary" text-color="white" v-if="film_genres_2">
                      {{film_genres_2}}      
                    <v-icon right>star</v-icon>
                    </v-chip>
                    <v-chip color="green" text-color="white" v-if="film_genres_3">
                      {{film_genres_3}}      
                    <v-icon right>star</v-icon>
                    </v-chip>
                    <v-chip color="red" text-color="white" v-if="film_genres_4">
                      {{film_genres_4}}      
                    <v-icon right>star</v-icon>
                    </v-chip>
                    <v-chip label color="pink" text-color="white" v-if="film_production">
                        <v-icon left>label</v-icon>Produce by: {{film_production}}
                    </v-chip>
                    <v-chip label color="secondary" text-color="white" v-if="film_release_date">
                        <v-icon left>label</v-icon>Release date: {{film_release_date}}
                    </v-chip>
                      <v-chip color="primary" text-color="white">Run time: {{film_runtime}} minutes</v-chip>
                </h5>
              </div>
            </v-card-title>
          </v-card>
        </v-flex>
        <v-flex xs7 offset-xs5>
        <v-expansion-panel
          expand
        >
          <v-expansion-panel-content
            v-for="(item, i) in 1"
            :key="i"
          >
            <template v-slot:header>
              <div>Overview</div>
            </template>
            <v-card>
              <v-card-text class="grey lighten-3">{{film_overview}}</v-card-text>
            </v-card>
          </v-expansion-panel-content>
        </v-expansion-panel>

            <vue-plyr>
              <div class="plyr__video-embed"  :key="$route.fullPath">
                <iframe
                  :src="'https://www.youtube.com/watch?v=' +video_key"
                  allowfullscreen allowtransparency allow="autoplay">
                </iframe>
              </div>
            </vue-plyr>
          </v-flex>
       <div class="loading" v-if="loading"><fingerprint-spinner/></div>
        </v-layout>
      </v-container>
    </div>
    </template>
    <script>
    import Navbar from '../components/Navbar'
    import axios from "axios"


    export default {
         components:{
            Navbar,
          },

          created() {
            this.$store.dispatch("fetchData");
           },
           computed:{
             video_key() {
                return this.$store.state.video_key 
             }},

      data () {
        return {
          loading:true,
          componentKey: 0,
          movie_key:null,
          fun:true,

          film_poster_path:null,
          film_title:null,
          film_tagline:null,
          film_overview:null,
          film_genres:null,
          film_genres_1:null,
          film_genres_2:null,
          film_genres_3:null,
          film_genres_4:null,
          film_production:null,
          film_release_date:null,
          film_runtime:null,
          film_key:null,
          // video_key:null,

          m_id:this.$route.params.m_id    
          }

    },
    mounted()  {
      // axios
      //   .get(`https://api.themoviedb.org/3/movie/${this.m_id}/videos?api_key=&language=en-US`)
      //     .then(response => (
      //       this.film_key=response.data.results[0].key
      //       ))
        axios
        .get(`https://api.themoviedb.org/3/movie/${this.m_id}?api_key=&language=en-US`)
          .then(response => (
            this.loading = false,
            this.film_title=response.data.original_title,
            this.film_tagline=response.data.tagline,
            this.film_overview=response.data.overview,
            this.film_poster_path=response.data.poster_path,
            this.film_genres=response.data.genres,
            this.film_genres_1=response.data.genres[0].name,
            this.film_genres_2=response.data.genres[1].name,
            this.film_genres_3=response.data.genres[2].name,
            this.film_genres_4=response.data.genres[3].name,
            this.film_production=response.data.production_companies[0].name,
            this.film_release_date=response.data.release_date,
            this.film_runtime=response.data.runtime
            // this.test=response.data.results[0].key
            ))


      }
    }
    </script>

    enter code here

Answer 1

这是来自store.js

import Vue from 'vue'
import Vuex from 'vuex'
import Axios from 'axios';
import router from './router'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)
Vue.use(Axios)
Vue.use(router)
Vue.use(createPersistedState)


export default new Vuex.Store({
  state: {
    video_key: [],

  },
  mutations: {
    updateInfo (state , video_key){
      state.video_key = video_key
    }
  },

  // getters:{
  //   m_id : router.currentRoute.params.m_id
  // },


  actions: {

    async fetchData({commit}){
      axios.get("https://api.themoviedb.org/3/movie/" + router.currentRoute.params.m_id + "/videos?api_key=7bc75e1ed95b84e912176b719cdeeff9&language=en-US")
        .then(response =>{
          commit('updateInfo',response.data.results[0].key)

        })
    }
  }
})

Vuex（store js）仅在刷新页面时才更新计算属性

1 个答案: