我对 VueJS 比较陌生，我不知道如何使某些数据全局可用。我想将 API 端点、用户数据和其他一些从 API 检索的数据保存在每个组件可以访问这些数据的地方。
我知道我可以只用普通的 Javascript 来保存它，但我想有一种方法可以用 VueJS 来做到这一点。我也许能够使用事件总线系统来获取数据，但我不知道如何根据我的需要实现这个系统。
如果有人能帮我解决这个问题，我将不胜感激。
VueJs 2 的全局数据
IT技术
javascript
vue.js
vuejs2
vue-component
2021-02-26 09:22:59
4个回答
制作一个全局数据对象
const shared = {
api: "http://localhost/myApi",
mySharedMethod(){
//do shared stuff
}
}
如果你需要在你的 Vue 上公开它，你可以。
new Vue({
data:{
shared
}
})
如果你不这样做，如果你已经导入它或者它们被定义在同一页面上，你仍然可以在你的 Vues 或组件中访问它。
就这么简单。如果需要，您可以将 shared 作为属性传递，或者全局访问它。
当您刚刚开始时，没有真正需要变得复杂。Vuex 经常被推荐使用，但对于小型项目来说也常常是矫枉过正。如果以后发现需要它，添加它并不难。它也确实用于状态管理，听起来您只是真的想访问一些全局数据。
如果你想变得花哨，把它做成一个插件。
const shared = {
message: "my global message"
}
shared.install = function(){
Object.defineProperty(Vue.prototype, '$myGlobalStuff', {
get () { return shared }
})
}
Vue.use(shared);
Vue.component("my-fancy-component",{
template: "<div>My Fancy Stuff: {{$myGlobalStuff.message}}</div>"
})
new Vue({
el: "#app"
})
现在，您创建的每个 Vue 和每个组件都可以访问它。这是一个例子。
您可以使用Storewhich 将保持您的应用程序状态。
const store = new Vuex.Store({
state: {
userData: []
},
mutations: {
setUserData (state, data) {
state.userData = data
}
}
})
有了这个，您可以访问状态对象store.state，并使用以下store.commit方法触发状态更改：
store.commit('setUserData', userData)
console.log(store.state.userData)
Vue 混入
// This is a global mixin, it is applied to every vue instance.
// Mixins must be instantiated *before* your call to new Vue(...)
Vue.mixin({
data: function() {
return {
get $asset() {
return "Can't change me!";
}
}
}
})
模板
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<div id="app">
In Root: {{globalReadOnlyProperty}}
<child></child>
</div>
或者
Vue.prototype.$asset = 'My App'
我只是使用 environment.js 文件将我的所有端点存储为对象属性。
var urls = {};
urls.getStudent = "api/getStudent/{id}";
etc...
然后，我将对此 environment.js 文件的引用放在我拥有需要访问这些端点的 VueJS 代码的页面上的文档头部。我确定有很多方法可以做到这一点。
其它你可能感兴趣的问题