vue设置全局变量、vue设置全局变量传值,值改变了但是全局变量不变

vue设置全局变量、vue设置全局变量传值,值改变了但是全局变量不变

Vue是一种流行的JavaScript框架，用于构建用户界面。在Vue中，设置全局变量是一种常见的需求，它可以让我们在整个应用程序享数据。有时候我们会遇到一个问题：当我们改变了全局变量的值时，它并没有在整个应用程序中生效。介绍如何设置全局变量，并解决这个问题。

**简介**

在Vue中，可以通过Vue实例的`data`选项来设置全局变量。例如，我们可以创建一个名为`app`的Vue实例，并在其`data`选项中定义一个全局变量`globalVar`：

“`javascript

var app = new Vue({

data: {

globalVar: ‘初始值’

}

})

现在，我们可以在应用程序的任何地方使用`app.globalVar`来访问这个全局变量。例如，我们可以在组件中使用它：
```javascript
Vue.component('my-component', {
  template: '{{ globalVar }}',
  computed: {
    globalVar: function () {
      return app.globalVar
    }
  }
})

这样，我们就可以在`my-component`组件中访问和显示`globalVar`的值了。

**小标题1：全局变量传值的问题**

当我们改变了`globalVar`的值时，却发现它并没有在整个应用程序中生效。这是因为Vue在创建Vue实例时会对`data`选项进行一次深拷贝，这意味着`globalVar`只是一个普通的JavaScript变量，而不是Vue响应式系统中的一个响应式属性。当我们改变`globalVar`的值时，Vue并不会自动更新相关的视图。

**小标题2：解决方法**

为了解决这个问题，我们可以使用Vue的`Vue.set`方法或`this.$set`方法来改变全局变量的值。这样，Vue会将这个改变视为一个响应式的变化，并自动更新相关的视图。

“`javascript

Vue.set(app, ‘globalVar’, ‘新的值’)

或者
```javascript
this.$set(app, 'globalVar', '新的值')

现在，当我们改变`globalVar`的值时，Vue会自动更新相关的视图。

**小标题3：全局变量的应用场景**

全局变量在Vue中有许多应用场景。例如，我们可以将用户的登录状态保存在一个全局变量中，以便在整个应用程序享。当用户登录或注销时，我们只需要改变这个全局变量的值，而不需要在每个组件中手动管理登录状态。

另一个应用场景是主题设置。我们可以将当前的主题保存在一个全局变量中，然后在整个应用程序中根据这个全局变量来动态改变主题。当用户切换主题时，我们只需要改变这个全局变量的值，而不需要在每个组件中手动管理主题。

**小标题4：全局变量的优缺点**

使用全局变量有一些优点和缺点。优点是它可以方便地在整个应用程序享数据，而不需要通过组件之间的传递来实现。这样可以减少代码的复杂性，提高开发效率。

全局变量也有一些缺点。全局变量可能会被滥用，导致代码的可维护性变差。全局变量的改变可能会对整个应用程序产生意想不到的影响，特别是在大型应用程序中。我们应该谨慎使用全局变量，并在必要的时候考虑使用其他解决方案。

**小标题5：总结**

在Vue中设置全局变量是一种常见的需求，它可以让我们在整个应用程序享数据。当我们改变了全局变量的值时，它并没有在整个应用程序中生效。为了解决这个问题，我们可以使用Vue的`Vue.set`方法或`this.$set`方法来改变全局变量的值，并让Vue自动更新相关的视图。

全局变量在Vue中有许多应用场景，例如用户的登录状态和主题设置。使用全局变量也有一些缺点，我们应该谨慎使用，并在必要的时候考虑使用其他解决方案。

希望能帮助你理解如何设置全局变量，并解决全局变量值改变但不生效的问题。如果你有任何疑问或建议，请随时留言。