[Vuejs]-How to modify a global variable from a mounted function? Vue.js

by

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.

1👍

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

Leave a comment