this2.$dispatch 不是函数答案

【问题标题】：this2.$dispatch is not a functionthis2.$dispatch 不是函数
【发布时间】：2020-09-13 09:39:25
【问题描述】：

我正在尝试像这样使用 vue.js 中的调度功能。但是我收到一个错误，说 this2.$dispatch 不是一个函数......就像你在屏幕截图中看到的那样

message.vue

  export default {
    data(){
        return{
            message:'',
            isLoading:false,
        }
    },

    methods:{
        addMessage(){
            if(this.message !=''){
                this.sendData();
            } else{
                this.$fire({
                    title: "Error",
                    text: "Enter some text.",
                    type: "error",
                    timer: 3000
                }).then(r => {
                    console.log(r.value);
                });
                setTimeout(() => {
                    this.isLoading = false
                },700)
            }
        },
        sendData(){
            this.isLoading = true;
            this.$http.post('/add-message' , {message:this.message, id_rooms:this.$route.params.id_rooms}).then((response) => {
                console.log(response.json());
                if(response.body != 'Error'){
                    this.message = '';
                    this.$dispatch('new_message', response.json());
                } else{
                    this.isLoading = false;
                }
            }, (response) =>{

            });
        }
    }
}

然后我试着像这样把它弄出来

chat.vue

 export default {
        components:{
            get_message:getMessage,
            add_message:addMessage,
        },
        data(){
            return{
                messages:[]
            }

        },
        events:{
            'new_message':function(data){
                this.messages.push(data);
            }
        }

    }

我在控制台中遇到这个错误...有什么想法可以解决这个问题吗？

【问题讨论】：

你能提供更多关于你如何称呼this.$dispatch('new_message', response.json());的上下文吗？
最常见的是因为您使用的是this，但它实际上不是您期望的上下文（例如，您在事件处理程序中使用它，它是元素上下文而不是组件上下文）。除非我们知道您如何使用它，否则我们无法确定这一点
@Daniel 我更新了我的代码
你试过this.$store.dispatch('new_message', response.json());吗？我不知道this.$dispatch 是做什么的，但我以前没有遇到过。
@Daniel 是的，我试过了......现在有一个错误 app.js:1980 Uncaught (in promise) TypeError: Cannot read property 'dispatch' of undefined

标签： laravel vue.js vuejs2 vue-component vuex

【解决方案1】：

更新

如果您的商店在 Vue 中注册，它似乎应该可以工作。如果您的$dispatch 在承诺之外工作，您可以尝试将this 上下文存储在另一个变量中

sendData(){
    this.isLoading = true;
    const that = this;
    this.$http
        .post('/add-message' , {message:this.message, id_rooms:this.$route.params.id_rooms})
        .then((response) => {
            console.log(response.json());
            if(response.body != 'Error'){
                that.message = '';
                that.$dispatch('new_message', response.json());
            } else{
                that.isLoading = false;
            }
        }, (response) =>{

        });
}

或者只是$dispatch

sendData(){
    this.isLoading = true;
    const $dispatch = this.$dispatch;
    this.$http
        .post('/add-message' , {message:this.message, id_rooms:this.$route.params.id_rooms})
        .then((response) => {
            console.log(response.json());
            if(response.body != 'Error'){
                this.message = '';
                $dispatch('new_message', response.json());
            } else{
                this.isLoading = false;
            }
        }, (response) =>{

        });
}

在这里猜测一下，但尝试改为调用它

this.$store.dispatch('new_message', response.json());

或者，您的问题可能是范围问题（看到这是从承诺中调用的）

如果你在 Promise 处理程序 then(function(response){this.$store.dispatch('new_message', response.json());}) 中声明了这样的函数，可能是由于范围

你可以尝试使用箭头函数

then((response) => {
  this.$store.dispatch('new_message', response.json());
})

【讨论】：