Vuejs 和 Vuex 操作 - 请求失败，状态码为 422答案

【问题标题】：Vuejs and Vuex actions - Request failed with status code 422Vuejs 和 Vuex 操作 - 请求失败，状态码为 422
【发布时间】：2017-11-25 09:57:10
【问题描述】：

我正在使用 Laravel 5.5、Vue 2 和 Vuex 创建系统注释。我不能发表评论。我进入控制台，出现两个错误：

TypeError：this.addComment 不是函数

错误：请求失败，状态码为 422

这是我的代码：

import { addComment } from '../../store/actions'
export default {
  computed: {
    addComment
  },
  vuex: {
    actions: { addComment }
  },
  data () {...},
  methods: {
    sendComment: function () {
        this.addComment({
            commentable_id: this.id,
            commentable_type: this.model,
            content: this.content,
            reply: this.reply
        })
    }

actions.js 代码

export const addComment = function ({dispatch}, comment) {
    return axios.post('/comments', comment).then((response) => {
        dispatch('ADD_COMMENT', response.data)
    })
};

我所有的路由、控制器和突变都经过测试并且运行良好。

【问题讨论】：

标签： javascript laravel-5 vuejs2 axios vuex

【解决方案1】：

只要store 是全局注册的，您就不需要将操作导入组件。所以你只需要像这样调用addComment：

this.$store.dispatch('addComment', {
  commentable_id: this.id,
  commentable_type: this.model,
  content: this.content,
  reply: this.reply
})

另外，将addComment 放入computed 没有意义，因此您必须将其删除。

在您的 addComment 操作中，我相信它被称为 commit 而不是 dispatch：

export const addComment = function ({commit}, comment) {
    return axios.post('/comments', comment).then((response) => {
        commit('ADD_COMMENT', response.data)
    })
}

【讨论】：

我在 php 中开发了很多东西。我不得不在这里做javascript，真的很痛苦。我进行了更正，现在得到了这个错误：[vuex] unknown action type: addComment AND TypeError: this.$store.dispatch(...) is undefined
没关系，能把你的主Vue组件和vuex store的内容加到问题里吗？
好吧，您需要导入整个 store 对象并将其添加到您的根 Vue 实例中，以使 this.$store 可用。
在我的 Form.vue 中，我添加了以下代码： import store from '../../store/Store' 但错误是一样的

【解决方案2】：

我的商店.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

export const state = {
    comments: []
};

export const mutations = {
    ADD_COMMENTS (state, comments) {
        state.comments.push(...comments)
    },
    ADD_COMMENT (state, comment) {
        if (comment.reply) {
            let c = state.comments.find((c) => c.id === comment.reply);
            if (c.replies === undefined) {
                c.replies = []
            }
            c.replies.push(comment)
        } else {
            state.comments.push(comment)
        },
    DELETE_COMMENT () {...}
};

let store = new Vuex.Store({
    state: state,
    mutations: mutations
});
export default store;

我的 Form.vue 组件：

import { addComment } from '../../store/actions'
import { mapActions } from 'vuex'

export default {
  vuex: {
    actions: { addComment }
  },
  data () {
    return {
      content: '',
      loading: false
    }
  },
  props: {
    id: Number,
    model: String,
    reply: {
      type: Number,
      default: 0
    }
  },
  methods: {
    sendComment: function () {
        this.loading = true;
        this.$store.dispatch('addComment', {
          commentable_id: this.id,
          commentable_type: this.model,
          content: this.content,
          reply: this.reply
        }).catch((error) => {
            this.error = error.response.data
        }).then(() => {
            this.loading = false
        })
    }
  }
}

【讨论】：