Correct way to do a redirect after posting through axios in a vuex store

Question

I am using nuxtjs, axios and vuex to post from a form component to post my data to my backend.

When posted I'd like to redirect to the view record screen and populate it with the returned information using the ID to navigate there

so my path might be /cases/14325 (if 14325 is the id returned once created)

What is the correct way to do this please

I have the following code in my vuex store

export const state = () => ({
    cases: []
  })

  // ***  MUTATIONS  ***
  export const mutations = {
    add(state, newCase ) {
    state.cases.push(newCase)
  },

  }

  // ***  ACTIONS  ***
  export const actions = {
    addCase(context, newCase) {
    const createdCase = {
        ...newCase
    }
    axios.post("http", createdCase)
    .then(result => {
        context.commit('add', {...createdCase, id: result.data.name})
    })
    .catch(e => console.log(e));
    },
  }

In my component I have the following

    import { mapMutations, mapGetters, mapActions } from 'vuex'
export default {

  data () {
    return {
      newCase: {
        caseName: '',
        summary: '',
        status: 'live',
      },
    }
  },

  methods: {

     ...mapActions([
      'addCase' 
    ]),
    onSubmit() {
      // Save the post
      this.$store.dispatch('addCase').then(path => {
        this.$router.redirect(path)
      }).catch((err) => {
        console.log(err)
      })  
    },
  }
}
</script>

How do i return the new id from my store please and replace cases/1 with '/cases/' + new id?

Thanks for the help as always

Answer 1

Maybe is will be enough when you improve your action this way:

addCase(context, newCase) {
  return new Promise ((resolve, reject) => {
    const createdCase = {...newCase}
    axios.post('http', createdCase).then(result => {
      context.commit('add', {...createdCase, id: result.data.name})
      resolve(/*path*/)
    }).catch(e => {
      console.log(e)
      reject(/*reason*/)
    })
  })
}

And then you use it this way:

this.$store.dispatch('addCase', context).then(path => {
  this.$router.redirect(path)
})