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

Question

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

缺点：在每个组件中，都应该添加它。注意：还有这么多组件。

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

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

Answer 1

注意：适用于 Vue 2x

建议一：使用 vuex 的 getter

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

Vuex

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

组件

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

方案二：通过插件添加观察者

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)

user-watcher-plugin.js

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

    Vue.watch: 'user'
  }
};

export default UserPlug;

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

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)

user-watcher-plugin.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;

Answer 2

基于@Denis 的回答，特别是提案3，这里是UserPlugin.js：

import store from '@/store/store';
import User from './User';

const UserPlugin = {
  install(Vue) {
    const $user = new User();
    window.$user = $user;
    store.commit('setUser', $user);
    Vue.mixin({
      computed: {
        $user() {
          return store.state.user;
        }
      }
    });
  }
};
export default UserPlugin;

和main.js:

import UserPlugin from './common/UserPlugin';

Vue.use(UserPlugin);

new Vue({
  render: h => h(App)
}).$mount('#app');

为了进一步使用，我发布了解决这些问题的小型库：

https://www.npmjs.com/package/vue-global-var

Answer 3

我刚刚创建了最小的codesandbox 以明确dependency Injection 在 vue 中的工作原理。

Answer 4

您可以使用 mixins 将 User.js 添加到您的根组件中，例如

import userLib from './User';
//User.js path should correct

然后

var app = new Vue({
    router,
    mixins: [
        userLib
    ],
  //.....
});

之后，您可以在任何组件中使用这些User 方法中的任何一个，例如

this.$parent.userClassMehtod();

或者如果有任何数据访问

this.$parent.userClassData;

最后别忘了在User.js中加export default{//..}

注意：仅当您将User.js 的所有方法导出到export default 时才有效

Answer 5

假设您实际上并未在每个组件中使用 user 的所有方法/属性，而是每次都使用其中的一部分，我看不出解决方案 1 和 2 对您不起作用的任何原因，因为通过不需要对每个组件都使用整个 user 对象。

假设您的对象User 有一些属性（a1、a2、a3 等）和方法（m1、m2、m3...）。如果一个组件只需要其中的一些（例如 a1、a2、m1、m2、m3），那么使用 Vuex，您可以使用映射函数（mapState、mapGetters、mapMutations 和 mapActions）从 user

import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
    computed: {
        ...mapState('user', [ 'a1' ]),
        ...mapGetters('user', [ 'a2' ])
    },
    methods: {
        ...mapMutations('user', [ 'm1' ]),
        ...mapActions('user', [ 'm2', 'm3' ])
    }
}

对于方案2（使用原型），要在user数据发生变化时更新组件，可以通过methods将必要的数据映射到组件。

export default {
    methods: {
        userA1() {
            return this.$user.attributes.a1;
        },
        userM1() {
            this.$user.methods.m1();
        }
        // and so on
    }
}

更好的是，您可以创建 mixin 以显式映射来自 user 的数据，并重用您的 mixin 以避免组件中的重复代码。 Vuex解决方案和原型解决方案都可以应用。

// mixin1:
const mixin1 = {
    computed: {
        ...mapState('user', [ 'a1' ]),
    },
    methods: {
        ...mapMutations('user', [ 'm1' ])
    }
}

// mixin2:
const mixin2 = {
    computed: {
        ...mapGetters('user', [ 'a2' ]),
    },
    methods: {
        ...mapActions('user', [ 'm2', 'm3' ])
    }
}

// component1
export default {
    mixins: [ mixin1 ]
}

// component 2
export default {
    mixins: [ mixin1, mixin2 ]
}

但如果你真的需要将整个对象 user 传递给每个组件，那么什么也做不了。相反，您应该检查您的实现，看看是否有更好的方法将对象分解为更小的有意义的对象。

Answer 6

您可以拥有第二个 Vue 实例并声明一个响应式属性。

See: Reactivity in depth