Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

store.replaceState(window.__INITIAL_STATE__) + vuex-router-sync cause issue on route with #hash #247

Open
lanaambre opened this issue May 6, 2019 · 1 comment

Comments

@lanaambre
Copy link

lanaambre commented May 6, 2019

Combine vuex-router-sync and store.replaceState(window.__INITIAL_STATE__) cause an issue when an URL contain hash like : /guide/data.html#server-data-fetching.

The route object in initial state does not have the hash because it's not provided over http.
So the hash is removed during the sync() from vuex-router-sync if sync() is setup before replaceState(). Like that :

index.js

export default function createApp() {
  // some code
  sync(store, router);
  // some code
} 

entry-client.js

import createApp from './index';

const { app, router, store } = createApp();

store.replaceState(window.__INITIAL_STATE__);

I have two solutions for now :

Solution 1 : Move sync() call after replaceState()

Actually, in my project structure the sync is made in a common file named index.js.
Both entry-client and entry-server import it.

We can fix the issue if we move the sync after the replace and remove it from index.js :

entry-client.js

store.replaceState(window.__INITIAL_STATE__);
sync(store, router);

entry-server.js

// some code
sync(store, router);

Pros : no initial state overriding, no extra code
Cons : duplicate sync() call entry-client.js and entry-server.js

Solution 2 : Add hash to initial state before replaceState()

const initialState = window.__INITIAL_STATE__;

if (initialState) {
  const hash = window.location.hash;

  if (hash && initialState.route) {
    initialState.route.hash = hash;
  }
  
  store.replaceState(initialState);
}

Pros : Avoid duplicate code (sync() remains in one place)
Cons : Manually override initial state

Solution 3*

Change the initial sync in vuex-router-sync ? (seems bad)

Conclusion :

It's not an issue by definition, but i want your opinion on this subject.

I don't like the solution 2, i think it's more a trick than a solution. But i don't know if solution 1 has side-effects, due to move the sync after Vue application creation.

@wfsovereign
Copy link

I like trick, hhh : )

The solution 1 will reduce one router change

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants