VueJs 2 的全局数据答案

【问题标题】：Global data with VueJs 2VueJs 2 的全局数据
【发布时间】：2017-08-28 20:06:34
【问题描述】：

我对 VueJS 比较陌生，我不知道如何让一些数据在全球范围内可用。我想保存数据，如 API 端点、用户数据和从 API 检索到的其他一些数据，每个组件都可以访问这些数据。
我知道我可以只用香草 Javascript 来保存它，但我想有一种方法可以用 VueJS 来做到这一点。我也许可以使用事件总线系统来获取数据，但我不知道如何实现这个系统以满足我的需要。

如果有人可以帮助我，我将不胜感激。

【问题讨论】：

有一个名为 Vuex 的 Vue.js 状态管理解决方案：documentation 它可以完成你提到的一切。

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

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'

【讨论】：

【解决方案2】：

您可以使用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)

【讨论】：

【解决方案3】：

创建一个全局数据对象

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 和每个组件都可以访问它。这是example。

【讨论】：

很好的答案！在 codepen 中，您应该控制台输出 $myGlobalStuff 而不是 $store。
@AbhishekJain 甚至没有注意到 :) 谢谢！
@AbhishekJain 如果您采用第一种方法并在data 上公开shared，则对象属性将转换为观察到的（反应性）值。如果采用插件的方式，最简单的方法就是将shared 做成一个Vue:const shared = new Vue({data:{message: 'my global message'}})。然后message 将是响应式的。
@AbhishekJain 我不确定哪个更好。插件方法（尤其是使用 Vue 作为共享对象时）是 Vuex 采用的方法的非常基本示例。在 Vuex 的底层，数据存储在 Vue 对象中以使其具有反应性，因此您可以争辩说它符合“官方”的流程。
您在第一个示例中遗漏了如何访问某些子组件中的数据。这就是我要找的。span>

【解决方案4】：

我只是使用 environment.js 文件将我的所有端点存储为对象属性。

var urls = {};
urls.getStudent = "api/getStudent/{id}";
etc...

然后我将这个 environment.js 文件的引用放在我有需要访问这些端点的 VueJS 代码的页面的文档头部。我相信有很多方法可以做到这一点。

【讨论】：