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

Question

I'm new to Vue.js and I couldn't find an answer online. I have a function in 'mounted:' and I need it to update a global variable.

Here is the code:

<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>

I want 'fetchMovie(text)' to update -movieName -moviePoster -moviePlot.

I have been reading the docs for a while now but nothing helps in this. Maybe I'm not catching the idea of how to pass data from functions, components and else.

Any advice? thanks a lot.

Answer 1

const movie = //your value

const keyword in JavaScript is used to define scope level constants. const variable cannot be reassigned, it must be assigned while initialisation.

const a;
a = 10;

This is absurd. So instead of const use let

let movie =//your value

It will declare a scope level variable. You can read more on the topics online. As far as vue is concerned.

 <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> 

Use this context inside the object to reference all the thing which is associated with vue.

Answer 2

In Vue, you can directly modify whatever is declared in the data of your component. It's a good practice to put your variables in one containing object. It's clean, and, mostly, Vue can't track changes if you overwrite the root of an object tree it's watching, so...

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