[컴][js] nuxtjs 에서 store 값을 모든 page 에서 공유 하기

 

vuex / share on pages / between pages / nuxtjs 에서 state 를 page 간 공유 / 전체 page 에 공유

nuxtjs 에서 store 값을 모든 page 에서 공유 하기

nuxtjs 의 store(Nuxt - Store directory) 는 한 page 내에서 여러 component 간의 state 등을 공유할 때 유용하게 사용할 수 있다. 하지만 reload 를 하게 되면 memory 정보가 다 날라가기 때문에 더이상 값을 유지할 수 없다. 이것은 다른 page 로 넘어갈 때도 마찬가지다.

그래서 페이지가 변해도 값을 유지 시키기 위해 vuex-persistedstate 는 localStorage 를 이용한다.

• vuex-persistedstate examples: example 에서 확인해 볼 수 있다. 현재 페이지에서 값을 변경하고 reload 를 해봐도 값이 유지되는 것을 확인할 수 있다.

코드(vuex-persistedstate/index.ts) 는 간단하다. store 에 저장할 때 localStorage 에도 같이 저장해주고, 나중에 값을 가져올 때도 localStorage 에서 가져오는 것이다.

function getState(key, storage) {
  const value = storage.getItem(key);
  
  try {
    return (typeof value === "string")
      ? JSON.parse(value) : (typeof value === "object")
      ? value : undefined;
  } catch (err) {}
  
  return undefined;
}

...

function setState(key, state, storage) {
  return storage.setItem(key, JSON.stringify(state));
}

References

1. GitHub - robinvdvleuten/vuex-persistedstate: 💾 Persist and rehydrate your Vuex state between page reloads.
2. Nuxt - Store directory