【Vue.js】通过独立响应式对象进行组件间数据共享

对于组件间的数据共享，也可以使用Vue.observable(object)。通过Vue.observable(object)，可以让一个对象变成可响应的。

// 定义独立的响应式对象
var state = Vue.observable({
    msg:'welcome',
    info:'你好'
});

上述响应式对象可以在任意组件的计算属性内使用，并且会在数据发生改变时触发相应的组件更新。实际上，此时就是将该响应式对象作为组件间数据状态存储的一个容器。

new Vue({
    el: '#app',
    components: {
        'comp-a': {
            template: '#a',
            computed: {
                msg: {
                    get() {
                        return state.msg;
                    },
                    set(value) {
                        state.msg = value;
                    }
                }
            }
        },
        'comp-b': {
            template: '#b',
            mixins: [options]
        }
    },
});

可以使用Vue的混入mixin技术，对组件中的复用代码进行统一配置，再将所有配置的内容混入组件中。

在上述代码中，两个组件computed选项中的内容是相同的，此时可以采用混入技术，将相同代码提取出来，单独写入一个对象options中。

var options = {
    computed: {
        msg: {
            get() {
                return state.msg;
            },
            set(value) {
                state.msg = value;
            }
        }
    }
}

然后分别在两个组件的mixins选项中混入，则上述comp-a组件的computed选项可以被mixins替代

new Vue({
    el: '#app',
    components: {
        'comp-a': {
            template: '#a',
            mixins:[options]
            // computed: {
            //     msg: {
            //         get() {
            //             return state.msg;
            //         },
            //         set(value) {
            //             state.msg = value;
            //         }
            //     }
            // }
        },
        'comp-b': {
            template: '#b',
            mixins: [options]
        }
    },
});