vue设置全局变量5种方法(让你的数据无处不在)

Vue.prototype.$globalVar = 'Hello World';

<template>
  <div>
    {{this.$globalVar}}
  </div>
</template>

Vue.mixin({
    data() {
        return {
            globalVar: 'Hello World'
        };
    }
});

<template>
  <div>
    {{this.globalVar}}
  </div>
</template>

const globalData = Vue.observable({
  globalVar: 'Hello World'
});
export default globalData;

<template>
  <div>
    {{globalData.globalVar}}
  </div>
</template>

<script>
import globalData from "@/main";
export default {
  data() {
    return {
      globalData,
    };
  },
};
</script>

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    globalVar: 'Hello World'
  },
  // ......
})

<template>
  <div>
    {{this.$store.state.globalVar}}
  </div>
</template>

<template>
  <div></div>
</template>
<script>
export default {
  mounted() {
    localStorage.setItem("globalVar", "Hello World");
  },
};
</script>

<template>
  <div>{{title}}</div>
</template>

<script>
export default {
  data() {
    return {
      title: "",
    };
  },
  mounted() {
    const value = localStorage.getItem("globalVar");
    if (value) {
      this.title = value;
    }
  },
};
</script>