Vue.prototypeを反応的に拡張する方法

私は単純なプラグインを作成しようとしています。これは、任意の要素にリップル効果を追加する命令です。今のところ、カスタムディレクティブはうまく動作します（hereをチェックしてください）が、ユーザーが一部の値をグローバルに変更できるように、いくつかのデータをVueインスタンスに追加します。私はこれのように使用されることを望みます。Vue.prototypeを反応的に拡張する方法

new Vue({ 
    ripple: { 
    color: '#f18c16' 
    } 
})

この例では、すべてのリップルディレクティブの色が変更されます。私が知る限り、これは文書化されていないので、Vueプラグインでlitleを調べると、このコードが出てきました。

const ripple = { 
    color: '#000' 
} 
const init = Vue.prototype._init 

Vue.prototype._init = function(options) { 
    options = options || {} 
    Vue.util.defineReactive(this, '$ripple', ripple) 
    init.call(this, options) 
}

そして、私の指示に私はこの

if (this.modifiers.white) { 
    point.style['background-color'] = '#fff' 
    } else { 
    point.style['background-color'] = this.vm.$ripple.color 
    }

のようなしかし、唯一私のVueのインスタンスに$rippleプロパティを追加し、私は期待宣言が機能していないこと、それを使用しています。チェックhereを確認してください。ですから、私の疑問は、私の指令に定義されているrippleオプションをどうすれば使えるのですか？これを行う公式/標準的な方法はありますか？

出典

2016-06-14 Yerko Palma