{"id":18880511,"url":"https://github.com/onewaytech/vue-sync-query-mixin","last_synced_at":"2025-08-26T07:08:00.301Z","repository":{"id":143812458,"uuid":"77520333","full_name":"OneWayTech/vue-sync-query-mixin","owner":"OneWayTech","description":"Effortlessly keep local state and $route.query in sync for Vue 1.x | 2.x","archived":false,"fork":false,"pushed_at":"2020-02-01T01:16:20.000Z","size":35,"stargazers_count":6,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-23T01:22:49.369Z","etag":null,"topics":["query","querystring","state","sync","vue"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/OneWayTech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-12-28T09:24:46.000Z","updated_at":"2021-04-03T18:50:27.000Z","dependencies_parsed_at":"2023-06-14T17:00:15.443Z","dependency_job_id":null,"html_url":"https://github.com/OneWayTech/vue-sync-query-mixin","commit_stats":null,"previous_names":["kenberkeley/vue-sync-query-mixin"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/OneWayTech/vue-sync-query-mixin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OneWayTech%2Fvue-sync-query-mixin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OneWayTech%2Fvue-sync-query-mixin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OneWayTech%2Fvue-sync-query-mixin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OneWayTech%2Fvue-sync-query-mixin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OneWayTech","download_url":"https://codeload.github.com/OneWayTech/vue-sync-query-mixin/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OneWayTech%2Fvue-sync-query-mixin/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272186817,"owners_count":24888448,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-26T02:00:07.904Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["query","querystring","state","sync","vue"],"created_at":"2024-11-08T06:44:15.639Z","updated_at":"2025-08-26T07:08:00.265Z","avatar_url":"https://github.com/OneWayTech.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue sync-query mixin\r\n\r\n\u003e `vue-sync-query-mixin@1.x` see branch `v1`\r\n\r\n[![npm version][npm-v-img]][npm-url]\r\n[![npm download][npm-dl-img]][npm-url]\r\n\r\n\u003e Effortlessly keep local state and `$route.query` in sync for Vue 1.x | Vue 2.x  \r\n\u003e Intellectual property of [Oneway.mobi](http://www.oneway.mobi/)\r\n\r\n### Requirement\r\n* Vue 1.x | 2.x\r\n* Vue Router 0.7.x | 2.x\r\n\r\n### Installation\r\n`npm i vue-sync-query-mixin -S`\r\n\r\nalternatively：`\u003cscript src=\"dist/vue-sync-query-mixin.min.js\"\u003e\u003c/script\u003e`  \r\nwhich exposes **`VueSyncQuery`** as a global variable\r\n\r\n### Example\r\nVue 1.x online example is [here](https://onewaytech.github.io/vue-sync-query-mixin/example-vue1.html) (source code is [`./example-vue1.html`](./example-vue1.html))  \r\nVue 2.x online example is [here](https://onewaytech.github.io/vue-sync-query-mixin/example-vue2.html) (source code is [`./example-vue2.html`](./example-vue2.html))  \r\n\r\n### Usage\r\n```js\r\n// This is a Vue component\r\nimport syncQuery from 'vue-sync-query-mixin'\r\n\r\nexport default {\r\n  mixins: [syncQuery],\r\n  data: () =\u003e ({ limit: 10 }),\r\n  ready () {\r\n    // `limit` will keep in sync with `$route.query.limit`\r\n    this.syncQuery('limit')\r\n  }\r\n  // Vue 1.x can use beforeCompile/compiled/ready\r\n  // Vue 2.x can use created/beforeMount/mounted\r\n}\r\n```\r\n\r\n`syncQuery` accepts 4 types of argument:\r\n\r\n* `string|string[]`\r\n\r\n```js\r\nthis.syncQuery('limit')\r\nthis.syncQuery(['limit'])\r\n```\r\n\r\n* `object|object[]`\r\n\r\n```js\r\nthis.syncQuery({\r\n  localField: 'limit',\r\n  queryField: 'limit',\r\n  local2query: {\r\n    formatter: v =\u003e v,\r\n    immediate: false,\r\n    deep: false\r\n  },\r\n  query2local: {\r\n    formatter: v =\u003e v,\r\n    immediate: true,\r\n    deep: false\r\n  }\r\n})\r\nthis.syncQuery([\r\n  {\r\n    localField: 'limit',\r\n    queryField: 'limit',\r\n    local2query: {\r\n      formatter: v =\u003e v,\r\n      immediate: false,\r\n      deep: false\r\n    },\r\n    query2local: {\r\n      formatter: v =\u003e v,\r\n      immediate: true,\r\n      deep: false\r\n    }\r\n  }\r\n])\r\n```\r\n\r\n### Magic\r\n\r\n\u003e More detail in [source code](./src/mixins/syncQuery.js)  \r\n\u003e Vue.js official `vm.$watch( expOrFn, callback, [options] )` API documentation is [here](https://cn.vuejs.org/v2/api/#vm-watch)\r\n\r\n```js\r\n_syncQuery ({ localField, queryField, local2query, query2local }) {\r\n  (() =\u003e {\r\n    // backup the default value\r\n    const defaultVal = this[localField]\r\n    \r\n    // local ==(sync)==\u003e query\r\n    this.$watch(localField, function (v, oldV) {\r\n      this.updateQuery({ [queryField]: local2query.formatter(v, oldV) })\r\n    }, local2query)\r\n\r\n    // local \u003c==(sync)== query\r\n    this.$watch(`$route.query.${queryField}`, function (v, oldV) {\r\n      this[localField] = query2local.formatter(v, oldV) || defaultVal\r\n    }, query2local)\r\n  })()\r\n}\r\n```\r\n\r\n### Notice\r\n* `local \u003c==(sync)== query`, default type is `string`, or else you need to write `formatter` yourself\r\n* default `local2query` and `query2local` shown as below:\r\n\r\n```js\r\n/**\r\n * default descriptor generator for $watch\r\n * @param  {String} field\r\n * @return {Object}\r\n */\r\nfunction defaultDescGen(field) {\r\n  return {\r\n    localField: field,\r\n    queryField: field,\r\n    local2query: {\r\n      formatter: v =\u003e v,\r\n      immediate: false,\r\n      deep: false\r\n    },\r\n    query2local: {\r\n      formatter: v =\u003e v,\r\n      immediate: true,\r\n      deep: false // P.S. watching deep of a string makes no sense\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nBut they can be `function` type, and then we regard them as the `formatter`  \r\nWhat's more, all the options are `merge` not `override`, for example:\r\n\r\n```js\r\nsyncQuery({\r\n  localField: 'limit',\r\n  queryField: 'limit',\r\n  local2query: { immediate: true },\r\n  query2local: v =\u003e +v // string to number\r\n})\r\n\r\n// ↑ is same as ↓\r\n\r\nsyncQuery({\r\n  localField: field,\r\n  queryField: field,\r\n  local2query: {\r\n    formatter: v =\u003e v,\r\n    immediate: true, // merge!\r\n    deep: false\r\n  },\r\n  query2local: {\r\n    formatter: v =\u003e +v, // merge!\r\n    immediate: true,\r\n    deep: false\r\n  }\r\n})\r\n```\r\n\r\n### Build\r\n`npm run build`\r\n\r\n[npm-url]: https://www.npmjs.com/package/vue-sync-query-mixin\r\n[npm-v-img]: http://img.shields.io/npm/v/vue-sync-query-mixin.svg\r\n[npm-dl-img]: http://img.shields.io/npm/dm/vue-sync-query-mixin.svg\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonewaytech%2Fvue-sync-query-mixin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fonewaytech%2Fvue-sync-query-mixin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonewaytech%2Fvue-sync-query-mixin/lists"}