vue-data-anchor

Record the state of vue's data to the route. State is restored when refreshing or reloading elsewhere.

Installation

npm install vue-data-anchor
# or
yarn add vue-data-anchor

Usage

import and install

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import VueDataAnchor from 'vue-data-anchor'

Vue.use(VueRouter)
Vue.use(VueDataAnchor)

Quick Start

We added an anchor option to vue to mark which data needs to be anchored.

Its value is an array, array items are allowed to be strings or objects.

For example:

<template>
    <div>content</div>
</template>
<script>
export default {
    data() {
        return {
            name: 'anchor',
            count: 1,
            params: {
                pageNum: 1
            }
        };
    },
    anchor: ['name', 'count', { key: 'params.pageNum', name: 'pageNum' }]
};
</script>

Note: The key is the value of data, and the name will be used as the name of this.$route.query[name]. Reference to AnchorOptions

Defaults

When state is default, value is not added to $route.query.

The default value is usually equal to the value at registration.

It can be configured using defaults.

For example:

<template>
    <div>content</div>
</template>
<script>
export default {
    data() {
        return {
            name: 'anchor',
            count: 1,
            params: {
                pageNum: 1
            }
        };
    },
    anchor: [{ key: 'count', defaults: 2 }]
};
</script>

Note: When refreshing, if the specified key does not exist in $route.query, even if the current value is not equal to the default value, it will not be restored to the default value.

API

• this.$anchor.register(anchorOptions: AnchorOptions = []): void;

• this.$anchor.unregister(key: string, clearRoute = true): boolean;

• this.$anchor.update(key: string): void;

• this.$anchor.restore(key: string): void;

• this.$anchor.pack(value: any): string;

• this.$anchor.unpack(packValue: string | (string | null)[] | undefined): any

Development

Watch

yarn watch

Tests

yarn test

Tests with coverage

yarn test-c

Build

Bundle the js to the dist folder:

yarn build