購読モードのvueにおける実際の運用例を発表します。

購読発表モードは、複数の購読者オブジェクトが同時にあるテーマオブジェクトを傍受するように複数の依存関係を定義しています。このテーマのオブジェクトは、自分の状態が変化すると、すべての購読者に通知され、自動的に自分の状態を更新することができます。
例えばaddEvent Listenerというアプリはリリース購読モードです。
vueを使ったクラスメートなら、彼を類別してもいいです。 ウォッチ
次は例を見ます。

var observe={
  fnsObj:{},
  //     
  on:function(key,fn){
    if(!observe.fnsObj[key]){
      observe.fnsObj[key] = []
    }
    observe.fnsObj[key].push(fn)
  },
  //   
  emmit:function(key,value){
    if(observe.fnsObj[key].length){
      var fnsList = observe.fnsObj[key]
      for(var i=0;i<fnsList.length;i++){
        fnsList[i].call(this,value)
      }
    }
    
  },
  //     
  remove:function(key){
    for(var k in observe.fnsObj){
      if(k===key) delete observe.fnsObj[key]
    }
  }
}

ok、じゃ試してみます。

//           
observe.on('say',function(e){
console.log('i can hear he say: '+e)
})
observe.on('say',function(e){
console.log('he say: '+e)
})

続いて発表します

//     
observe.emmit("say"," ，      ")

コンソールが2つのメッセージに戻りました。先ほど私たちが定義した購読者の中で印刷された内容です。
i can hear he say：ここはリリース者です。
 ヘsay：ここは発表者です。
これは購読モードを発表します。多くの人が概念を知っていると信じていますが、プロジェクトの中でどのように実際に使うかというと、これはまた大きな問題です。
デザインモードはあまり一般的ではないので、デザインモードを使わなくても、需要を実現できるので、vueで出会った一つの需要の中でどのように購読モードを発表するかを重点的に紹介します。
実際に運用する
1，需要紹介
このプロジェクトは社内の人的資源管理システムです。そのためには、さまざまな権限に応じてメニューを取得する必要があります。また、いくつかのプルダウン枠のデータや基礎情報があります。登録後すぐに取得し、インターフェースを呼び出してデータを取得した後、vuexに保存します。
今のところこれらの方法はap.vueに書いてあります。

//       
 this.loadMenu()
 this.loadBasicData()
 this.loadUserInfo()

ですから、二つの状況を考慮したいです。
これらのデータはログインしてからしか引き出せません。
現在のページの更新は、ログイン後のデータの引き出しが必要です。そうでなければ、何の操作も行われません。
1,従来の解決策
これは比較的に普遍的な需要です。似たようなものはよく見られます。常規的な解決方法によって、こうすればいいです。
これらの方法をmixinの中に入れます。
ログイン成功後、一つの状態をsession Strageに保存し、これらの方法を呼び出してデータを引き出します。
app.vueの中のcreatedライフサイクルでsession Strageの状態が登録されているかどうかを判断します。登録すればデータを取ります。
問題は、万が一これらの方法がap.vueにしか入れられない場合です。例えば、このプロジェクト、ap.vueは私が書いたのではありません。もう一つの先に書いてありますが、彼はこれらの方法をmixinに置きたくないですか？
私たちがsession Strageの変化をモニターできればいいです。でも、ウォッチもcomputedもsession Strageの変化を監督することができません。
ですから、この時に使ってみてもいいです。 購読モードを公開
1,observe.jsを作成します。

class Observe {
 constructor() {
  this.fnsObj = {}
 }
   //     
 on(key, fn) {
  if (!this.fnsObj[key]) { this.fnsObj[key] = [] }
  this.fnsObj[key].push(fn)
 }
   //   
 emmit(key, value) {
  if (this.fnsObj[key].length) {
   var fns = this.fnsObj[key]
   for (let i = 0; i < fns.length; i++) {
    fns[i].call(this, value)
   }
  }
 }
   //     
 remove(key) {
  for (var k in this.fnsObj) {
   if (k === key) {
    delete (this.fnsObj[k])
   }
  }
 }
}
const observeSession = new Observe()

export default observeSession

2,ap.vueで彼を導入し、同時に傍受と発表者を定義します。

import observeSession from './utils/Observe'
...
created(){
  //               
   sessionStorage.getItem('login') === 'login' && this.loadSelectVal()
  //      ，   window.setSessionStorage   ，       
   window.setSessionStorage = (key, value) => {
    observeSession.emmit('watchSesStore', { key, value })
   }
 //      sessionStorage      ，            ，       
   observeSession.on('watchSesStore', e => {
    sessionStorage.setItem(e.key, e.value)
    e.value === 'login'&&this.loadSelectVal()
   })
}

最後に私達はlogin.vueページにログインして成功した時、彼に一行を追加します。window.setSessionStorage('login', 'login')及びrouter.jsルーティング制御において、脱退時に処理する。

//                 
 if (to.name === "Login") {
  next()
  window.setSessionStorage && window.setSessionStorage('login', 'logout')
 } else {
 ....

これまでは完璧な解決が必要です。
締め括りをつける
以上述べたのは小编がみんなに绍介した発表購読モードのvueの中の実用的な运用の実例です。皆さんに助けてほしいです。もし何か疑问があれば、メッセージをください。小编はすぐに返事します。