Skip to content

Commit 25e4c4a

Browse files
author
Ken Berkeley
committed
support Vue 2.x
1 parent 5d442e2 commit 25e4c4a

File tree

8 files changed

+98
-21
lines changed

8 files changed

+98
-21
lines changed

‎README.md‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
# Vue sync-query mixin
22

3-
> v1.x see branch `v1`
3+
> `vue-sync-query-mixin@1.x` see branch `v1`
44
55
[![npm version][npm-v-img]][npm-url]
66
[![npm download][npm-dl-img]][npm-url]
77

8-
> Effortlessly keep local state and `$route.query` in sync for Vue 1.x
8+
> Effortlessly keep local state and `$route.query` in sync for Vue 1.x | Vue 2.x
99
> Intellectual property of [Oneway.mobi](http://www.oneway.mobi/)
1010
1111
### Requirement
12-
* Vue 1.x
13-
* Vue Router 0.7.x
12+
* Vue 1.x | 2.x
13+
* Vue Router 0.7.x | 2.x
1414

1515
### Installation
1616
`npm i vue-sync-query-mixin -S`
@@ -19,7 +19,8 @@ alternatively：`<script src="dist/vue-sync-query-mixin.min.js"></script>`
1919
which exposes **`VueSyncQuery`** as a global variable
2020

2121
### Example
22-
See [here](https://kenberkeley.github.io/vue-sync-query-mixin/example.html), source in [`example.html`](./example.html)
22+
Vue 1.x online example is [here](https://kenberkeley.github.io/vue-sync-query-mixin/example-vue1.html) (source code is [`./example-vue1.html`](./example-vue1.html))
23+
Vue 2.x online example is [here](https://kenberkeley.github.io/vue-sync-query-mixin/example-vue2.html) (source code is [`./example-vue2.html`](./example-vue2.html))
2324

2425
### Usage
2526
```js
@@ -33,6 +34,8 @@ export default {
3334
// `limit` will keep in sync with `$route.query.limit`
3435
this.syncQuery('limit')
3536
}
37+
// Vue 1.x can use beforeCompile/compiled/ready
38+
// Vue 2.x can use created/beforeMount/mounted
3639
}
3740
```
3841

@@ -83,7 +86,7 @@ this.syncQuery([
8386
### Magic
8487

8588
> More detail in [source code](./src/mixins/syncQuery.js)
86-
> Vue.js official `vm.$watch( expOrFn, callback, [options] )` API documentation is [here](http://v1.vuejs.org/api/#vm-watch)
89+
> Vue.js official `vm.$watch( expOrFn, callback, [options] )` API documentation is [here](https://cn.vuejs.org/v2/api/#vm-watch)
8790
8891
```js
8992
_syncQuery ({ localField, queryField, local2query, query2local }) {

‎dist/vue-sync-query-mixin.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎es/mixins/syncQuery.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,6 @@ exports.default = {
5959
var defaultVal = _this2[localField];
6060

6161
_this2.$watch(localField, function (v, oldV) {
62-
if (v == oldV) return;
6362
this.updateQuery(_defineProperty({}, queryField, local2query.formatter(v, oldV)));
6463
}, local2query);
6564

‎example.html‎ renamed to ‎example-vue1.html‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<title>Vue Sync Query Mixin Example</title>
5+
<title>Vue 1.x Sync Query Mixin Example</title>
66
</head>
77
<body>
88
<h4>Modify both input boxes and query string of the URL, to see how they keep in sync</h4>
@@ -26,10 +26,6 @@ <h4>Modify both input boxes and query string of the URL, to see how they keep in
2626
<script src="./dist/vue-sync-query-mixin.min.js"></script>
2727
<pre id="script" style="font-size: 12px">
2828
/**************** Source Code ****************/
29-
Vue.use(VueRouter);
30-
Vue.config.devtools = true;
31-
32-
// root component
3329
var App = {
3430
mixins: [VueSyncQuery.default],
3531
data: function () {
@@ -61,10 +57,10 @@ <h4>Modify both input boxes and query string of the URL, to see how they keep in
6157
}
6258
};
6359

64-
// run app!
6560
var router = new VueRouter();
6661
router.map({ '/': { component: {} } });
6762
router.start(App, '#app');
63+
Vue.config.devtools = true;
6864
</pre>
6965
<script>
7066
eval(document.getElementById('script').innerHTML);

‎example-vue2.html‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Vue 2.x Sync Query Mixin Example</title>
6+
</head>
7+
<body>
8+
9+
<h4>Modify both input boxes and query string of the URL, to see how they keep in sync</h4>
10+
<div id="app"><router-view></router-view></div>
11+
12+
<script type="text/x-template" id="app-tpl">
13+
<div>
14+
<fieldset>
15+
<code>$route.query: {{ $route.query }}</code>
16+
</fieldset>
17+
<fieldset>
18+
<code>$vm.$data: {{ $data }}</code><hr>
19+
a: <input type="text" v-model="a">&emsp;
20+
b: <input type="text" v-model="b">&emsp;
21+
c: <input type="text" v-model="c"><br>
22+
d: {{ d }} <button @click="d.push(4)">push</button><br>
23+
e: <input type="text" v-model="e">&emsp;
24+
f: <input type="text" v-model="f">&emsp;
25+
g: <input type="text" v-model="g">
26+
</fieldset>
27+
</div>
28+
</script>
29+
<script src="//cdn.bootcss.com/vue/2.2.6/vue.js"></script>
30+
<script src="//cdn.bootcss.com/vue-router/2.3.1/vue-router.min.js"></script>
31+
<script src="./dist/vue-sync-query-mixin.min.js"></script>
32+
<pre id="script" style="font-size: 12px">
33+
/**************** Source Code ****************/
34+
var App = {
35+
name: 'App',
36+
template: '#app-tpl',
37+
mixins: [VueSyncQuery.default],
38+
data: function () {
39+
return { a: 1, b: 2, c: 3, d: [4, 4, 4, 4], e: 5, f: 6, g: 7 };
40+
},
41+
mounted: function () {
42+
this.syncQuery('a');
43+
this.syncQuery(['b', 'c']);
44+
this.syncQuery({
45+
localField: 'd',
46+
queryField: 'dddd',
47+
local2query: function (v) {
48+
return v.join(',');
49+
},
50+
query2local: function (v) {
51+
// return falsy value meaning restore the default value
52+
return v ? v.split(',') : null;
53+
}
54+
});
55+
this.syncQuery([
56+
'e', // same as { localField: 'e', queryField: 'e' }
57+
{ localField: 'f', queryField: 'ffffff' }
58+
]);
59+
this.syncQuery({
60+
localField: 'g',
61+
queryField: 'ggggggg',
62+
local2query: { immediate: true }
63+
});
64+
}
65+
};
66+
67+
new Vue({
68+
el: '#app',
69+
router: new VueRouter({ routes: [{ path: '/', component: App }] })
70+
});
71+
Vue.config.devtools = true;
72+
</pre>
73+
<script>
74+
eval(document.getElementById('script').innerHTML);
75+
</script>
76+
</body>
77+
</html>

‎package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
{
22
"name": "vue-sync-query-mixin",
3-
"description": "Effortlessly keep local state and $route.query in sync for Vue 1.x",
3+
"description": "Effortlessly keep local state and $route.query in sync for Vue 1.x|2.x",
44
"author": "Ken Berkeley <kenberkeley@foxmail.com>",
5-
"version": "2.0.5",
5+
"version": "2.1.0",
66
"main": "es/index.js",
77
"scripts": {
8-
"prebuild": "rimraf es dist",
9-
"build": "npm run build:es && npm run build:umd",
108
"build:es": "babel src --out-dir es",
11-
"build:umd": "webpack src/ dist/vue-sync-query-mixin.min.js"
9+
"build:umd": "webpack src/ dist/vue-sync-query-mixin.min.js",
10+
"prebuild": "rimraf es dist",
11+
"build": "npm run build:es && npm run build:umd"
1212
},
1313
"repository": {
1414
"type": "git",
@@ -20,7 +20,7 @@
2020
"sync"
2121
],
2222
"dependencies": {
23-
"vue-update-query-mixin": "^1.0.0"
23+
"vue-update-query-mixin": "^1.1.4"
2424
},
2525
"devDependencies": {
2626
"babel-cli": "^6.18.0",

‎src/mixins/syncQuery.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ export default {
2929

3030
// local ==(sync)==> query
3131
this.$watch(localField, function (v, oldV) {
32-
if (v == oldV) return // eslint-disable-line
3332
this.updateQuery({ [queryField]: local2query.formatter(v, oldV) })
3433
}, local2query)
3534

‎webpack.config.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ module.exports = {
1313
library: 'VueSyncQuery',
1414
libraryTarget: 'umd'
1515
},
16+
externals: {
17+
vue: 'vue'
18+
},
1619
plugins: [
1720
new webpack.optimize.UglifyJsPlugin({
1821
compressor: {

0 commit comments

Comments
 (0)