chrome.storage support about vuex-persist HOT 5 OPEN

import * as types from './mutation-types'

export const chromeStorageSyncPlugin = (store) => {
  // This is just so we know the state path for each mutation
  // we want to listen to since we can't derive it from the `mutation` arg.
  // There may be an easier way to do this, 
  // or you can omit it entirely if you want to sync your entire state tree.
  const STORAGE_MUTATIONS_MAP = {
    [types.SET_SCREEN]: 'currentScreen',
    [types.SET_IS_DRAWER_OPEN]: 'isDrawerOpen',
    [types.INCREMENT_BADGE_COUNT]: 'badgeCount',
    [types.CLEAR_BADGE_COUNT]: 'badgeCount',
    [types.SET_ALERT_SUBSCRIPTIONS]: 'alertSubscriptions',
    [types.TOGGLE_ALERT_SUBSCRIPTION]: 'alertSubscriptions',
    [types.TOGGLE_ALL_ALERT_SUBSCRIPTIONS]: 'alertSubscriptions',
  }

  // Re-hydrate the store on init from storage.
  // I'm toggling this `isLoading` state so I can show a loading screen 
  // to avoid UI blips when the storage data is loaded.
  // Not necessary but you'll probably want to handle this somehow since it's async.
  store.commit({ type: types.SET_IS_LOADING, isLoading: true })
  chrome.storage.sync
    .get([...Object.values(STORAGE_MUTATIONS_MAP)])
    .then((storageData) => {
      store.replaceState({ ...store.state, ...storageData })
    })
    .catch((error) => {
      console.log(error)
    })
    .finally(() => store.commit({ type: types.SET_IS_LOADING, isLoading: false }))

  store.subscribe((mutation, state) => {
    if (Object.keys(STORAGE_MUTATIONS_MAP).includes(mutation.type)) {
      const stateKey = STORAGE_MUTATIONS_MAP[mutation.type]
      // This step is necessary to parse state values,
      // they are stored as Proxys
      const newValue = JSON.parse(JSON.stringify(state[stateKey]))

      chrome.storage.sync.set({ [stateKey]: newValue })
    }
  })
}

// in your store setup...
export default createStore({
  // ...
  plugins: [chromeStorageSyncPlugin]
})