我在VueJS方面相对较新,我不知道如何使某些数据在全球范围内可用。我想保存一些数据,比如API端点、用户数据和从API中检索到的其他数据,每个组件都可以访问这些数据。
我知道我可以用普通的Javascript来保存这个文件,但是我想有一种方法可以用VueJS来实现。我可能可以使用事件总线系统来获取数据,但我不知道如何实现这个系统来满足我的需要。
如果有人能帮我做这件事我会很感激的。
发布于 2017-04-03 12:13:58
创建一个全局数据对象
const shared = {
api: "http://localhost/myApi",
mySharedMethod(){
//do shared stuff
}
}
如果你需要把它暴露在你的Vue上,你可以。
new Vue({
data:{
shared
}
})
如果没有,您仍然可以在您的Vue或组件中访问它,如果您已经导入了它,或者它们是在同一个页面上定义的。
就这么简单。如果需要,可以将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和每个组件都可以访问它。这是一个示例。
发布于 2019-12-11 22:40:19
您可以使用Store
来保存您的应用程序状态。
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)
发布于 2021-02-08 06:22:50
武美欣
// 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'
https://stackoverflow.com/questions/43193409
复制相似问题