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

Posted 2023-02-23

【中文标题】如何从挂载的函数中修改全局变量？ Vue.js

【英文标题】：How to modify a global variable from a mounted function? Vue.js

【发布时间】：2020-03-21 04:44:38

【问题描述】：

我是 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" />
            <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。

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

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

【问题讨论】：

你试过movieName = 什么吗？等

你怎么知道它不起作用？您的陈述处于尝试中。是否有任何内容记录到控制台？

它没有将新值分配给变量。控制台按预期记录 API 请求。

【参考方案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;
 
 

【讨论】：

你怎么知道它不起作用？控制台有错误吗？你有打开 vue devtools 吗？箭头函数在 Vue 组件中通常是一个坏主意。我已经重写了没有箭头功能的答案。试试看？

【参考方案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 相关的东西。

【讨论】：

我已经写 vue 一年多了。我就是这样做的。您是否正在其他一些文件中访问它，您将无法访问它。我假设这是您正在尝试但无法做到的事情。在您定义变量的位置创建一个文件，并将其导入您需要的任何位置。如果不是这样，请随时纠正我。