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