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

根据您提供的代码。

您的状态为“错误”
你没有犯突变
通过不提交变异，您不会改变状态

文档：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>

但您必须使用actions以异步方式运行

Answer 3

我会使用总线将错误从错误组件发生的任何地方传递出去。这样，错误组件不需要直接与您的商店或任何其他组件交互，并且可以轻松管理自己的内部状态。您也不需要将错误组件包含在任何其他组件中。

此示例假定您只想在UI中使用单个错误组件实例。我会将错误组件实例放在您的主App模板中，并根据它是否有任何非处理错误显示或隐藏自己。

宣布一个简单的公共汽车......

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'});

在错误组件中......

import errorBus from './errorBus.js'

and within the component definition...    

    created: function() {
        errorBus.errorBus.$on("notifyError", function(error) {this.addError(error)};
    },
    data () {
      return {
          errors: []
      };
   },
   methods: {
       addError: function(error) {
           this.errors.push(error);
       }
   }

通过这种机制，您可以通过在错误对象中传递其他信息，以不同的方式轻松处理不同的错误 - 例如，您可以添加{handling：＆＃34; toast＆＃34;，priority：0}会导致错误组件立即烘烤错误。

如果您使用此方法进行祝酒，请考虑在错误被烘烤后保留错误供以后查看 - 我一直想要一些错误抽屉，我可以在闲暇时打开而不是在它消失之前立即处理吐司。

vue js 2：如何在商店和组件之间进行通信

3 个答案: