Question

我是Vue.js的新手，我无法在线找到答案。我在'mount：'中有一个函数，需要它来更新全局变量。

代码如下：

<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

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关联的所有事物。

Answer 2

在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;
} 
}

如何从已安装的函数修改全局变量？ Vue.js

2 个答案: