Vuejs 및 Vuex 작업 - 상태 코드 422로 요청 실패

Vuejs 및 Vuex 작업 - 상태 코드 422로 요청 실패

저는 Laravel 5.5, Vue 2, Vuex로 시스템 코멘트를 작성하고 있습니다.댓글을 달 수가 없어요.콘솔에 두 가지 오류가 있습니다.

유형 오류: 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)
    })
};

저의 모든 경로, 컨트롤러 및 돌연변이가 테스트되고 잘 작동합니다.

작업을 구성 요소로 가져올 필요는 없습니다.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)
    })
}

내 스토어.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;

My 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
        })
    }
  }
}

언급URL : https://stackoverflow.com/questions/47484672/vuejs-and-vuex-actions-request-failed-with-status-code-422