VueJS:在组件之间使用全局对象的最佳实践？

Question

有User.js类和用户对象(user = new User();).

该user对象正在所有嵌套组件中使用.在User课堂上有很多重要的方法.

如何在任何组件中简单地使用/ access this.user或其this.$user方法？

1解决方案(临时工作解决方案):user在vuex商店中设置并在所有组件中定义'data:

data(){
  return {
    user:this.$store.state.user
  }
}

缺点:在每个组件中,都应该添加.注意:组件太多了.

2解决方案:将用户添加到Vue的原型中,如插件:

Vue.prototype.$user = user

缺点:当user数据发生变化时,它不会影响 DOM元素(UI).

3解决方案:放置组件的道具.

缺点:在每个组件中,都应该添加.注意:同样有很多组件.

我发现的所有解决方案都存在问题,特别是随着项目变得越来越大.

任何建议和解决方案将不胜感激!

Answer 1

注意：适用于 Vue 2x

建议 1：使用 vuex 中的 getter

• 您可以使用getterswith mapGettersfrom Vuex 将用户包含在每个组件的计算属性中。

Vuex

getters: {
  // ...
  getUser: (state, getters) => {
    return getters.user
  }
}

成分

import { mapGetters } from 'vuex'
computed: {
  ...mapGetters([getUser])
}

建议 2：通过插件添加观察者

视图

// When using CommonJS via Browserify or Webpack
const Vue = require('vue')
const UserPlug = require('./user-watcher-plugin')

// Don't forget to call this
Vue.use(UserPlug)

用户观察者插件.js

const UserPlug = {
  install(Vue, options) {
    // We call Vue.mixin() here to inject functionality into all components.

    Vue.watch: 'user'
  }
};

export default UserPlug;

建议 3：user通过 mixin添加一个计算属性作为插件

视图

// When using CommonJS via Browserify or Webpack
const Vue = require('vue')
const UserPlug = require('./user-watcher-plugin')

// Don't forget to call this
Vue.use(UserPlug)

用户观察者插件.js

const UserPlug = {
  install(Vue, options) {
    // We call Vue.mixin() here to inject functionality into all components.

    Vue.mixin({
      computed: {
        user: function() {
          return this.$store.state.user
        }
      }
    })
  }
};

export default UserPlug;