CODEWITHSUNDEEP
laravel-5vuejs2vue-routervuexlaravel-mix
Mireli Eyyubzade
Mireli Eyyubzade

Reputation: 315

Vue Router and Vuex

I have 2 questions. 1. How can I catch undefined routes and redirect to 404 page? 2. How I can use Vuex actions to get data from api? I know that vuex mutations must be sync and actions async. But I can get data with mutations and can use then promise. but can't in actions or I do anything mistake. Please give me beautiful example for that(component type). I use vuex in laravel mix in Laravel project. Thanks...

Upvotes: 0

Views: 519

Answers (1)

K3TH3R
K3TH3R

Reputation: 759

Generally speaking, you shouldn't be getting undefined routes if you're defining all of the routes within an app. You can define a redirect in your routes configuration as such:

[
    {
        path: 'admin/posts/list',
        name: 'post-list',
    },
    {
        path: 'admin/posts',
        redirect: 'admin/posts/list'
    }
]

// you can also redirect to a named route instead
// of a path like this:
{
    path: 'admin/posts',
    redirect: { name: 'post-list' }
}

If you wanted to do a "catch all" that grabs any paths not matched and redirect to your 404 component/view, then you could do it like this:

{
    path: '*',
    redirect: '/404'
}

Make sure that is at the bottom of your routes definition as the last route because it will catch any routes in the tree it is above.

As for your question about mutations/actions, asynchronous API requests like fetching data from an API only every happen within actions when you're using Vuex.Taken from the documentation on actions:

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  }
}

Upvotes: 1

Related Questions