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对象的任何组件中,您可以user通过Vuex.mapState帮助函数定义计算属性:

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对象),您也可以使用mixin:

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

这样,所有Vue实例都可以访问user指向user最初在您的main.js文件中设置的对象的被动对象.

这是一个例子:

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>