方法1. 设置并引入全局变量文件
创建一个 Store.vue (或 js 文件) 并暴露出去, 用来保存全局变量
<script>
const name = 'wells';
const age = 24;
export default {
name,
age
};
</script>
在 Test.vue 组件中使用
<template>
<div>{{ myName }}</div>
<div>{{ myAge }}</div>
</template>
<script>
import myStore from '@/components/Store'; // 引用模块
export default {
data () {
return {
myName: myStore.name,
myAge: myStore.age
}
}
}
</script>
方法2. 将上面的 Store.vue 文件挂载到 Vue.prototype
main.js
import myStore from '@/components/Store';
Vue.prototype.$myStore = myStore; // 挂载到 Vue 实例上
现在就可以在组件中通过 this.$myStore.name 直接调用了, 不需要再单独引入模块
方法3. 使用 Vuex 来保存变量
这里不做详述, 想了解的朋友可以看下 十分钟入门Vuex
