English | 简体中文

vuex-along - A plugins for vuex

Automatically restore vuex state after refreshing the page

Directory

• Install
• Usage
• Example
• Options
• Cleanup
• RunDemo
• Tips
• Contribution
• Maintainers
• License

Install

npm install vuex-along --save
# or
yarn add vuex-along

Usage

import createVuexAlong from 'vuex-along'

export default new Vuex.Store({
  state:{...},
  modules:{...},
  plugins: [createVuexAlong()]
});

Now, the plugin has been in effect, and all state is stored to localStorage by default.

Set Options to meet the usage requirements

• secure-adapter

Example

→ Online Example

import createVuexAlong from "vuex-along";

const moduleA = {
  state: {
    a1: "hello",
    a2: "world",
  },
};

const store = new Vuex.Store({
  state: {
    count: 0,
  },
  modules: {
    ma: moduleA,
  },
  plugins: [
    createVuexAlong({
      //Set the collection name to avoid multi-project data conflicts with the same site
      name: "hello-vuex-along",
      local: {
        list: ["ma"],
        // Filter the module ma data, save the other to localStorage
        isFilter: true,
      },
      session: {
        // Save a1 in module ma to sessionStorage
        list: ["ma.a1"],
      },
    }),
  ],
});

Options

VuexAlongOptions

Field	Required	Type	Description
name	no	String	Set the name of the local data collection, the default is vuex-along
local	no	Object	LocalStorage configuration, see #WatchOptions
session	no	Object	SessionStorage configuration, see #WatchOptions
justSession	no	Boolean	Use only sessionStorage

WatchOptions

Field	Required	Type	Description
list	yes	String []	List of strings of attribute names or module names that need to be listened to
isFilter	no	Boolean	Filter fields in list instead of saving

Cleanup

window.clearVuexAlong(local = true, session = true):void;
clearVuexAlong() // localStorage and sessionStorage will be cleaned up
clearVuexAlong(true,false) // Just localStorage
clearVuexAlong(false,true) // Just sessionStorage

RunDemo

git clone https://github.com/boenfu/vuex-along.git
cd ./vuex-along
yarn run:demo

Tips

• Support typescript
• Support IE11
• sessionStorage data recovery takes precedence over localStorage
• The key of the top-level object that stores the content is fixed to root

Contribution

Maintainers

• boen

License

• MIT