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'])

这是一个简单的例子：

＆＃13;

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'])
})

＆＃13;

<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>

＆＃13;

如果您不想添加Vuex库，（并且您真的不介意您的每个组件都可以访问user对象），那么您也可以使用mixin ：

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

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

以下是一个例子：

＆＃13;

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',
})

＆＃13;

<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>

＆＃13;

Answer 2

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

Vuejs2更新Vue.prototype全局对象

2 个答案: