Home

I’m trying to redirect inside of a Vuex action.

1. It initially renders the page it is going to redirect to, but the URL does not change.
2. It ends up rendering the original page that it was redirecting from.
3. It throws a hydration error:

Parent:  
<div class="form-container" data-v-58d7984c="">
vue.runtime.esm.js:5940
Mismatching childNodes vs. VNodes:  
NodeList [ form ]
 
Array [ {…} ]
vue.runtime.esm.js:5941
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

Here is the code for the action:

export async function EDIT_TEACHER({ dispatch, commit, state }, { id }) {
  try {
    const { data } = await this.$axios({
      url: `/teachers/${id}/edit`,
      method: 'get'
    });
    commit('SET_TEACHER', data.teacher);
  } catch ({ response }) {
     dispatch('PROMPT_SIGN_IN');
  }
}

PROMPT_SIGN_IN will redirect.

Here is where I call it:

async fetch({ store, params }) {
    if (Object.keys(store.state.teacher.data).length <= 0)
      await store.dispatch('EDIT_TEACHER', { id: params.teacher });
  } 

Any idea on this?