如何从挂载的函数中修改全局变量？ Vue.js

Question

我是 Vue.js 的新手，在网上找不到答案。我在 'mounted:' 中有一个函数，我需要它来更新全局变量。

代码如下：

<template>
    <div id="MovieContent">
        <h1>Content</h1>
        <div class="movie-details-container">
            <h3 class="movie-title">{{movieTitle}}</h3>
            <IMG class="movie-poster" :src="moviePosterURL" alt=""/>
            <p class="movie-description">{{movieDescription}}</p>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import { MdField } from 'vue-material/dist/components'

    Vue.use(MdField);

    const API_URL = 'http://www.omdbapi.com/?apikey=API_KEY&';
    // eslint-disable-next-line no-unused-vars
    const POSTER_API_URL = 'http://img.omdbapi.com/?apikey=API_KEY&';

    const movieName = null;
    const moviePoster = null;
    const moviePlot = null;

    export default {
        data: () => ({
            movieTitle: movieName,
            moviePosterURL: moviePoster,
            movieDescription: moviePlot
        }),
        methods: {

        },
        mounted: function () {
            this.$root.$on('SEND_SEARCH_INPUT', (text) => {
                async function fetchMovie(text) {
                    try {
                        const movieDetails = await fetch(API_URL + `t=${text}`);
                        const myJSON = await movieDetails.json();

                        // eslint-disable-next-line no-console
                        console.log(myJSON['Title']);
                        // eslint-disable-next-line no-console
                        console.log(myJSON['Year']);
                        // eslint-disable-next-line no-console
                        console.log(myJSON['Poster']);
                        // eslint-disable-next-line no-console
                        console.log(myJSON['Plot']);
                    } catch (error) {
                        // eslint-disable-next-line no-console
                        console.log(error)
                    }
                }

                fetchMovie(text)

            })
        }
    }
</script>

<style>

</style>

我希望 'fetchMovie(text)' 更新 -movieName -moviePoster -moviePlot。

我已经阅读了一段时间的文档，但对此没有任何帮助。也许我没有理解如何从函数、组件等传递数据。

有什么建议吗？非常感谢。

Answer 1

在 Vue 中，您可以直接修改组件数据中声明的任何内容。将变量放在一个包含对象中是一种很好的做法。它很干净，而且大多数情况下，如果你覆盖它正在监视的对象树的根，Vue 无法跟踪更改，所以......

let vueStore = {
    movieName:null,
    moviePoster:null,
    moviePlot:null,
}
export default { 
data(){ return {vueStore: vueStore} }, 
methods: { },
mounted: function () {
    this.vueStore.movieName = this.movieName;
    this.vueStore.moviePoster = this.moviePoster;
    this.vueStore.MoviePlot = this.moviePlot;
} 
} 

Answer 2

const movie = //your value

JavaScript 中的

const 关键字用于定义范围级别的常量。 const 变量不能重新赋值，必须在初始化时赋值。

const a;
a = 10;

这太荒谬了。所以用 let

代替 const

let movie =//your value

它将声明一个范围级别的变量。您可以在线阅读有关这些主题的更多信息。就 vue 而言。

 <script>
  import Vue from 'vue';
  import { MdField } from 'vue-material/dist/components' Vue.use(MdField); 
 const API_URL = 'http://www.omdbapi.com/?apikey=API_KEY&'; // eslint-disable-next-line no-unused-vars
   const POSTER_API_URL = 'http://img.omdbapi.com/?apikey=API_KEY&'; 

 let movieName = null; 
 let moviePoster = null; 
 let moviePlot = null; 
 export default { 
 data: () => ({ movieTitle: movieName, moviePosterURL: moviePoster, movieDescription: moviePlot }), 
 methods: { },
 mounted: function () {
      movieName = this.movieName;
      moviePoster = this.moviePoster;
      MoviePlot = this.moviePlot;
  } 
} 
</script> 

在对象内部使用这个上下文来引用所有与 vue 相关的东西。