vuex-storage-share

Vuex storage share plugin.


Keywords
vuex, storage, share, tab, localStorage
License
MIT
Install
npm install vuex-storage-share@0.1.2

Documentation

vuex-storage-share

npm version Gzip Size Monthly Downloads License: MIT

Installation

Install

$ npm install vuex-storage-share --save
# or
$ yarn add vuex-storage-share

Usage

import VuexStorageShare from 'vuex-storage-share'

const storagePlugin = VuexStorageShare({
  storagePrefix: 'VUEX_STORAGE/',
  predicate: ['SET_USER_INFO', 'SET_TOKEN', 'SET_USER_AVATAR'],
  expires_in: 3600, // One hour, it has not yet been realized
  storageListener({ type, payload }) {
    const route = router.app._route
    if (type === 'SET_USER_INFO') {
      if (!(payload && payload.is_login) && route.path !== '/login') {
        router.replace({
          path: '/login',
          query: {
            redirect: route.fullPath
          }
        })
      }
      if ((payload && payload.is_login) && route.path === '/login') {
        router.replace(route.query && route.query.redirect || '/home')
      }
    }
  }
})

const store = new Vuex.Store({
  state: {
    userinfo: {
      is_login: false
    }
  },
  mutations: {
    SET_USER_INFO(state, userinfo) {
      userinfo.is_login = !!userinfo.id
      state.userinfo = userinfo
    }
  },
  modules: {
    app,
    user,
  },
  getters,
  plugins: [
    storagePlugin.subscriber
  ]
})

Options

Option Explain Type Default
storagePrefix localStorage key prefix. It is also a unique identification. String VUEX_STORAGE/
expires_in Expiration time in seconds. Number 0
predicate List of mutations to store and share. Array []
storageListener storageListener({ type, payload }) {} Whenever the store is persisted, return a mutation object. Function -

MIT License

Copyright © 2021 LinQuan.