Awesome
Vue sync-query mixin
vue-sync-query-mixin@1.x
see branchv1
Effortlessly keep local state and
$route.query
in sync for Vue 1.x | Vue 2.x
Intellectual property of Oneway.mobi
Requirement
- Vue 1.x | 2.x
- Vue Router 0.7.x | 2.x
Installation
npm i vue-sync-query-mixin -S
alternatively:<script src="dist/vue-sync-query-mixin.min.js"></script>
which exposes VueSyncQuery
as a global variable
Example
Vue 1.x online example is here (source code is ./example-vue1.html
)
Vue 2.x online example is here (source code is ./example-vue2.html
)
Usage
// This is a Vue component
import syncQuery from 'vue-sync-query-mixin'
export default {
mixins: [syncQuery],
data: () => ({ limit: 10 }),
ready () {
// `limit` will keep in sync with `$route.query.limit`
this.syncQuery('limit')
}
// Vue 1.x can use beforeCompile/compiled/ready
// Vue 2.x can use created/beforeMount/mounted
}
syncQuery
accepts 4 types of argument:
string|string[]
this.syncQuery('limit')
this.syncQuery(['limit'])
object|object[]
this.syncQuery({
localField: 'limit',
queryField: 'limit',
local2query: {
formatter: v => v,
immediate: false,
deep: false
},
query2local: {
formatter: v => v,
immediate: true,
deep: false
}
})
this.syncQuery([
{
localField: 'limit',
queryField: 'limit',
local2query: {
formatter: v => v,
immediate: false,
deep: false
},
query2local: {
formatter: v => v,
immediate: true,
deep: false
}
}
])
Magic
More detail in source code
Vue.js officialvm.$watch( expOrFn, callback, [options] )
API documentation is here
_syncQuery ({ localField, queryField, local2query, query2local }) {
(() => {
// backup the default value
const defaultVal = this[localField]
// local ==(sync)==> query
this.$watch(localField, function (v, oldV) {
this.updateQuery({ [queryField]: local2query.formatter(v, oldV) })
}, local2query)
// local <==(sync)== query
this.$watch(`$route.query.${queryField}`, function (v, oldV) {
this[localField] = query2local.formatter(v, oldV) || defaultVal
}, query2local)
})()
}
Notice
local <==(sync)== query
, default type isstring
, or else you need to writeformatter
yourself- default
local2query
andquery2local
shown as below:
/**
* default descriptor generator for $watch
* @param {String} field
* @return {Object}
*/
function defaultDescGen(field) {
return {
localField: field,
queryField: field,
local2query: {
formatter: v => v,
immediate: false,
deep: false
},
query2local: {
formatter: v => v,
immediate: true,
deep: false // P.S. watching deep of a string makes no sense
}
}
}
But they can be function
type, and then we regard them as the formatter
What's more, all the options are merge
not override
, for example:
syncQuery({
localField: 'limit',
queryField: 'limit',
local2query: { immediate: true },
query2local: v => +v // string to number
})
// ↑ is same as ↓
syncQuery({
localField: field,
queryField: field,
local2query: {
formatter: v => v,
immediate: true, // merge!
deep: false
},
query2local: {
formatter: v => +v, // merge!
immediate: true,
deep: false
}
})
Build
npm run build