Vue.js VueJS：在组件之间使用全局对象的最佳实践

发布于02月15日

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

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

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

1-solution(临时工作解决方案):在vuex的store中设置user，并在所有组件的data中定义:

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

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

2-solution:将用户添加到Vue的prototype类插件:

Vue.prototype.$user = user

缺点:当user的数据发生变化时，它不会出现在DOM元素(UI)中.

3-solution:把组件放到props.

缺点:在每个组件中，都应该添加这一点.注意:还有很多组件.

我发现的所有解决方案都有问题，尤其是随着项目越来越大.

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

注:适用于Vue 2x

建议1:使用vuex的getter

You could use getters along with mapGetters from Vuex to include users within computed properties for each 组成部分.

Vuex

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

组成部分

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

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

Vue

// 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 组成部分s.

    Vue.watch: 'user'
  }
};

export default UserPlug;

Proposal 3: add a computed property `user` as plugin via mixin

Vue

// 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 组成部分s.

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

export default UserPlug;