Vueを使用した単一ページアプリケーションの迅速な開発-機能コンポーネントとルーティングコンポーネントの通信

本明細書に関連するコードはすべてvue-cnodeにある
上図は私たちのdemoプロジェクトの全体的な構造で、3番目のレベルに3つのものrouter、グローバルコンポーネント、機能コンポーネントが見えます.グローバルコンポーネントと機能コンポーネントはrouterから離れています.この2つの部分はすべての論理コンポーネントが共有しているからです.私たちは彼を出してAppに置いた.vueはrouterの下に置かれているルーティングコンポーネントではなく、一度だけ参照してグローバルに呼び出すためです.
しかしながら、具体的なルーティングロジックコンポーネントが示すグローバルコンポーネントの内容は異なり、機能コンポーネントのインタラクションを必要とする内容も異なるため、異なるルーティングロジックコンポーネントでグローバルコンポーネントと機能コンポーネントを制御する必要がある.
この文書では、vuexを使用してグローバルコンポーネントと機能コンポーネントを制御する方法について説明します.
vuexを使用して論理データを転送する
制御といえば、実はコンポーネント間のインタラクションであり、vueではコンポーネントのインタラクションには多くの方法があり、ここではvuexを使用します.
機能コンポーネントとグローバルコンポーネントの機能的インタラクションを行うためのmodule(doc_state)を個別に作成し、moduleでは機能コンポーネントまたはグローバルコンポーネントに必要なデータ、関数メソッドなどを初期化します.次の図に示します.

// doc state              
import {
  SET_TIP
} from '../mutation_types'
const state = {
  tip: {
    text: '',
    time: 2000,
    callback: null
  }
}
const mutations = {
  [SET_TIP] (state, tip) {
    state.tip = tip
  }
}
export default {
  state,
  mutations
}

ここではtip(ヒント)コンポーネントを例に説明し、doc modulesは/src/vuex/modules/doc_stateにあります.
次にdoc_を定義しますActionsは私たちのactionを定義します.

import * as types from '../mutation_types'

export const setTip = ({dispatch}, tip) => {
  if (!tip.time) tip.time = 2000 //   tip    
  dispatch(types.SET_TIP, tip)
}

Actionsは、ルーティングロジックコンポーネントで参照され、actionを呼び出すとtipコンポーネントを制御します.
doc_をstateをstoreにマウントします.jsでいいです～

import docState from './modules/doc_state'
export default new Vuex.Store({
  modules: {
    docState,
    content,
    userInfo
  },
  strict: debug,
  middlewares: debug ? [] : []
})

tipコンポーネント
私たちのcommonフォルダにtipを新規作成します.vue.彼は私たちのヒント情報コンポーネントです.(経路/src/components/common/tip.vue)
まず、vuexのtipのデータを取得する必要があります.

vuex: {
  getters: {
    tip: ({ docState }) => docState.tip
  }
},

具体的な論理です

data () {
  return {
    tipVisible: false
  }
},
watch: {
  tip: 'tipShow'
},
methods: {
  tipShow () {
    let self = this
    self.tipVisible = true
    setTimeout(function () {
      self.tipVisible = false
      if (self.tip.callback) {
        self.tip.callback()
      }
    }, self.tip.time)
  }
}

上のtipVisibleは、templateで表示を制御するために使用される変数です.

tipコンポーネントは全部で3つのことをしました.

vuexが取得したtip変数を傍受し、tip変数が変更されたときにtipShowメソッドを実行する.

展示情報

展示時間終了後、コールバック関数(ある場合)

を実行する.
上にはtipコンポーネントの論理が完成し、最後にtipコンポーネントをAppに掛ける必要があります.vue.
template:

js:

import tip from './components/common/tip'
export default {
  components: {
    tip,
  },
}

これにより、すべてのルーティングロジックコンポーネントで呼び出すことができます.
呼び出し方法
ログインコンポーネントを例にとります.
まずactionを導入する必要があります.

import { setMenu, setTip } from '../../vuex/actions/doc_actions'
export default {
  vuex: {
    actions: {
      setTip,
      setDetail
    }
  }
}

ログインエラーが発生した場合、ユーザーにメッセージを提示します.

this.setBaseInfo(this.access, (res) => {
  if (res.success) {
    this.success()
  }
  this.setTip({
    text: res.msg
  })
})

this.setTipメソッドを呼び出すだけでいいです.簡単じゃないの?コンポーネントが作成されたら、後でみんなで使用すると、この方法を呼び出すだけです.
ここでは主にコールバック関数のthisの指向が必要であることに注意してください.以下を推奨します.

this.setTip({
  text: 'lala',
  callback: () => {
    this.xxx()
  }
})

矢印関数には、宣言された場所のthisをバインドする役割があります.これにより、callbackで現在のコンポーネントのメソッドを呼び出すことができます.矢印関数を使わずにbindでもいいです～
小結
私たちのコンポーネントのインタラクションは完全にデータによって制御されていることがわかります.機能コンポーネントとvuexのmoduleを構築するときは複雑ですが、論理がより明確で、debugのときも便利です.サブコンポーネント呼び出しも非常に簡単で、インタフェースがかなり提供されています.
テキストリンク:http://hiluluke.cn/2016/08/25...
その他

Vueを使用した1ページのアプリケーションの迅速な開発-本体構造

Vueを使用した1ページのアプリケーションの迅速な開発-vue-router

Vueを使用した1ページアプリケーションの迅速な開発-ログインページ

Vueを使用した1ページのアプリケーションの迅速な開発-機能コンポーネントとルーティングコンポーネントの通信

.