vue js 2：店とコンポーネント間の通信方法

Question

私はvue jsの初心者です。 コンポーネントからエラーを処理し、それを他のコンポーネントに表示しようとしています。

私の店のデータを見ることができるので、明らかに作業を処理しています 私のコンポーネント（error.vue）に小道具を付けて、それをデータ変数で処理します。 その後、それを私のvueに表示することはできません。 なぜですか？ここで

は私のコードです：

私の店は次のとおりです。

var store = new Vuex.Store(
{ 
    state: { 
    errors:{} 
    }, 
    mutations: { 
    setErrors(state, error) { 
      for(var err in error) { 
       state.errors[err] = error[err] 
      } 
     } 
    } 
}) 

私は私の誤差成分を入れて、私のVUE：

<template> 
    <div id="wrapper"> 
<div class="container"> 
       <error_handling></error_handling> 
       <router-view></router-view> 
     </div> 
    </div> 
</template> 
<script> 
    import Error from './components/Error.vue' 
    import store from './store'; 
    export default { 
     components: { 
      'error_handling': Error 
     }, 
     data() { 
      return { 
       erreurs: store.state.errors 
      } 
     } 


    } 
</script> 

私のエラーVUE：

<template> 
    <div> 
     <ul> 
      {{errors_handling}} 
      <!--<li v-for="error in errors_handling">{{ error }}</li>--> 
     </ul> 
    </div> 
</template> 
<script> 
    export default { 
     props: ['errors_hand'], 
     data() { 
      return { 
       errors_handling: this.errors_hand 
      } 
     } 

    } 
</script> 

Answer 1

あなたの証明書に基づいてコード。

あなたが「エラー」は
1. あなたが変異をコミットしないことにより変異
2. を犯していないの状態を取得している
3. 、あなたが変更されていない状態

ドキュメント：Vuex Mutations

Answer 2

Store.js

var store = new Vuex.Store(
{ 
    state: { 
    errors:{} 
    }, 
    mutations: { // Change the state object 
    setErrors(state, error) { 
      for(var err in error) { 
       state.errors[err] = error[err] 
      } 
     } 
    }, 
    getters:{ 
      // getters gets the current object of state 
      GetErrors(state) //by default getters get state as first paramater 
      { 
       return state.errors; 
      } 
     }, 

}) 

エラーコンポーネント

<script> 
     export default { 
     computed:{ 
       errors_handling(){ 
       return this.$store.getters.GetErrors; 
       } 
     }, 
     methods:{ 
      //commit your mutation or dispatch when using action 
       ChangeState(error){ 
        this.$store.commiit('setErrors',error); 
       } 
      } 
     } 
</script> 

しかし、あなたはasyncronously

Answer 3

私は、彼らが誤差成分に起こるどこからエラーを渡すためにバスを使用することになり、それを実行するためにactionsを使用する必要があります。このようにして、エラーコンポーネントはストアや他のコンポーネントと直接対話する必要はなく、簡単に内部状態を管理することができます。他のコンポーネントにエラーコンポーネントを含める必要もありません。

この例では、UIに1つのエラーコンポーネントインスタンスのみが必要であることを前提としています。私はあなたのメインアプリケーションテンプレートにエラーコンポーネントのインスタンスを配置し、それが表示されるか、それが処理されていないエラーがあるかどうかに基づいてそれ自身を隠すようにします。シンプルなバスを宣言する

...

in file errorBus.js 

import Vue from 'vue' 

const errorBus = new Vue(); 

export default { 
    errorBus 
} 

エラーが...あなたが使用して、誤差成分に渡すことを誤差成分で

import errorBus from './errorBus.js' 

errorBus.errorBus.$emit("notifyError", { msg: 'An error has occurred'}); 

を発生どこ.. 。

このメカニズムを使用すると、さまざまな方法で異なるエラーを簡単に処理できますエラーオブジェクトに追加情報を追加することができます。たとえば、{handling： "toast"、priority：0}を追加すると、エラーコンポーネントは即座にエラーをトーストします。

トーストに使用する場合は、エラーがトーストされた後に表示されるエラーを残しておくことを検討してください - 私は余裕をもってを開くことができるを開くことができるエラードロワそれが消える直前。