在vue里面设置全局变量或数据的方法

在Vue中设置全局变量或数据的方法有多种。下面是两种常见的方法示例：

方法一：使用Vue.prototype

Vue.prototype允许我们在Vue实例中添加自定义属性或方法，从而实现全局变量或数据的设置。

首先，在Vue的入口文件（通常是main.js）中，添加以下代码：

// main.js
import Vue from 'vue';

Vue.prototype.$globalVariable = 'Hello, world!';

现在，我们可以在任何Vue组件中使用this.$globalVariable来访问全局变量。

<template>
  <div>
    <p>{{ $globalVariable }}</p>
    <button @click=\"changeGlobalVariable\">Change Global Variable</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeGlobalVariable() {
      this.$globalVariable = 'New value';
    }
  }
}
</script>

在上面的示例中，我们在Vue组件中使用了$globalVariable来显示全局变量的值，并且通过点击按钮来改变全局变量的值。

方法二：使用Vue.observable

Vue.observable允许我们创建一个可响应的对象，该对象可以在整个应用程序中共享。

首先，在Vue的入口文件（通常是main.js）中，添加以下代码：

// main.js
import Vue from 'vue';

Vue.prototype.$globalData = Vue.observable({
  message: 'Hello, world!'
});

现在，我们可以在任何Vue组件中使用this.$globalData来访问全局数据。

<template>
  <div>
    <p>{{ $globalData.message }}</p>
    <button @click=\"changeGlobalData\">Change Global Data</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeGlobalData() {
      this.$globalData.message = 'New message';
    }
  }
}
</script>

在上面的示例中，我们在Vue组件中使用了$globalData.message来显示全局数据的值，并且通过点击按钮来改变全局数据的值。

这两种方法都可以实现在Vue中设置全局变量或数据，选择哪种方法取决于你的具体需求和项目结构。