Vuejs and Vuex actions - Request failed with status code 422

Question

I'm creating a system comment with Laravel 5.5, Vue 2 and Vuex. I Can't post a comment. I get in my console, two errors:

TypeError: this.addComment is not a function

Error: Request failed with status code 422

This is my code:

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 code

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

All my routes, controller and mutations are tested and work well.

Ikbel · Accepted Answer · 2017-11-25 10:32:43Z

1

You don't need to import actions into your components as long as the store is registered globally. So you simply need to call addComment like this:

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

Also, putting addComment in computed doesn't make sense so you have to remove it.

In your addComment action, I believe it's called commit not dispatch:

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

answered Nov 25, 2017 at 10:32

Ikbel

7,8513 gold badges36 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

kouakou alexis Over a year ago

I develop a lot more in php. I am obliged here to do javascript, really painful. I made the corrections and I get this now ERROR: [vuex] unknown action type: addComment AND TypeError: this.$store.dispatch(...) is undefined

Ikbel Over a year ago

It's ok, can you add the content of your main Vue component and vuex store to the question?

Ikbel Over a year ago

Ok cool, you need to import the whole store object and add it to your root Vue instance in order to make this.$store available.

kouakou alexis Over a year ago

In my Form.vue, I added this code: import store from '../../store/Store' but error is the same

kouakou alexis · Accepted Answer · 2017-11-25 11:28:01Z

My Store.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 Component:

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

Collectives™ on Stack Overflow

Vuejs and Vuex actions - Request failed with status code 422

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related