Vuejs2 更新 Vue.prototype 全局对象

Question

我已经在我的 main.js 中创建了一个全局对象来访问控制器之间整个应用程序中登录的用户数据

main.js

Vue.prototype.user = getUser() // assume a method to getUser data

现在上面的 .user 对象将在 this.user,

的其他组件中可用

我正在寻找的是，如果我在任何组件中对 this.user 进行更改，这些更改也会反映到其他组件，现在不会发生这种情况

我有两个组件，一个用于更新 this.user EditProfileComponent.vue

中的数据

<input type="text" v-model="user.firstName" />
<input type="text" v-model="user.lastName" />

等显示数据UserCardComponent.vue

<h1>{{user.firstName}} {{user.lastName}}<h1>

在提交上述表格时，我将数据保存到数据库中，并在刷新时使用 getUser() 将其取回，

如我所料，当我对表单中的 v-model 进行更改时，它应该直接显示更改为 UserCardComponent.vue

Answer 1

当您设置 Vue.prototype.user 的值时，Vue 不希望该值绑定到 DOM，因此它不会响应。您可能已经看到以这种方式设置的全局服务（如 Vue.prototype.$http 或类似），但这些对象并未直接绑定到 DOM.

维护响应式全局可访问对象的最直接方法是使用 Vuex。

您可以创建一个商店来包含 user 对象：

const store = new Vuex.Store({
  state: { user: getUser() }
})

并通过将 store 对象传递给根 Vue 实例来注册商店：

new Vue({
  el: '#app',
  store
})

然后，在需要访问 user 对象的任何组件中，您可以通过 Vuex.mapState 帮助函数定义计算的 user 属性：

computed: Vuex.mapState(['user'])

这是一个简单的例子：

function getUser() {
  return {
    firstName: 'John',
    lastName: 'Doe'
  }
}

const store = new Vuex.Store({
  state: { user: getUser() },
})

Vue.component('user-card', {
  template: `<h1>{{user.firstName}} {{user.lastName}}</h1>`,
  computed: Vuex.mapState(['user'])
})

new Vue({
  el: '#app',
  store,
  computed: Vuex.mapState(['user'])
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>

<div id="app">
  <user-card></user-card>
  <input type="text" v-model="user.firstName" />
  <input type="text" v-model="user.lastName" />
</div>

如果你不想添加 Vuex 库，（而且你真的不介意你的每个组件都可以访问 user 对象）你也可以使用混合：

let user = getUser();
Vue.mixin({ 
  data() { 
    return { user }
  }
})

这样，您所有的 Vue 实例都可以访问一个响应式 user 对象，该对象指向最初在您的 main.js 文件中设置的 user 对象。

这是一个例子：

function getUser() {
  return {
    firstName: 'John',
    lastName: 'Doe'
  }
}

let user = getUser();
Vue.mixin({
  data() {
    return { user }
  }
})

Vue.component('user-card', {
  template: `<h1>{{user.firstName}} {{user.lastName}}</h1>`,
})

new Vue({
  el: '#app',
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>

<div id="app">
  <user-card></user-card>
  <input type="text" v-model="user.firstName" />
  <input type="text" v-model="user.lastName" />
</div>

Answer 2

全局 OBJ >> Vue.prototype.OBJ
响应式 OBJ >> Vue.observable(OBJ)
假设 getUser() return 一个对象 >> Vue.prototype.user = Vue.observable( getUser() )

Vuejs2 更新 Vue.prototype 全局对象

Vuejs2 update Vue.prototype global object

global

vue-component

vuejs2