vue js 2：如何在 store 和组件之间进行通信答案

【问题标题】：vue js 2 : how to communicate between store and a componentvue js 2：如何在 store 和组件之间进行通信
【发布时间】：2018-01-10 18:10:03
【问题描述】：

我是 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>

我的错误：

<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>

【问题讨论】：

使用 getter 获取组件中的状态
@GhanshyamSingh 有或没有 getter，不提交突变状态将保持不变
您应该阅读vuex documentation core concepts，然后在此处查看一些官方示例：github repo。提示：你需要 getter 和 action。

标签： javascript vuejs2 vue-component vuex

【解决方案1】：

根据您提供的代码。

您正处于“错误”状态
您没有提交突变
通过不提交突变，您并没有改变状态

文档：Vuex Mutations

【讨论】：

【解决方案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 异步运行它

【讨论】：

我在下面回答了你？它仍然无法正常工作，确实我现在有这个错误：渲染函数中的错误：“TypeError：无法读取未定义的属性'getters'”:(你知道为什么吗？
@thomaspoidevin 您正在导入 mapGetters，但您没有在任何地方使用它。我建议你回到 Vuex 的基础知识，以充分了解如何操作状态

【解决方案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: "toast", priority: 0} 这将导致错误组件立即为错误干杯。

如果您使用它来祝酒，请考虑在祝酒后保留错误以供以后查看 - 我一直想要一个错误抽屉之类的东西，我可以在闲暇时打开而不是在吐司消失之前立即处理它。

【讨论】：