8000 docs: updates · meteor-vue/vue-meteor-tracker@f053aae · GitHub
[go: up one dir, main page]
Skip to content

Commit f053aae

Browse files
author
Guillaume Chau
committed
docs: updates
1 parent b0b4eef commit f053aae

File tree

1 file changed

+102
-107
lines changed

1 file changed

+102
-107
lines changed

‎README.md

Lines changed: 102 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@ meteor npm install --save vue-meteor-tracker
1515

1616
Install the plugin into Vue:
1717

18-
```javascript
19-
import VueMeteorTracker from 'vue-meteor-tracker';
20-
Vue.use(VueMeteorTracker);
18+
```js
19+
import VueMeteorTracker from 'vue-meteor-tracker'
20+
Vue.use(VueMeteorTracker)
2121
```
2222

2323
*Note: if you are using the Meteor [akryum:vue](https://github.com/Akryum/meteor-vue-component/tree/master/packages/vue) package, you don't need to install the plugin.*
@@ -29,32 +29,33 @@ Vue.use(VueMeteorTracker);
2929
In your Vue component, add a `meteor` object :
3030

3131

32-
```javascript
33-
new Vue({
32+
```js
33+
export default {
3434
meteor: {
3535
// Meteor specific options
3636
}
37-
});
37+
}
3838
```
3939

40-
4140
#### Subscriptions
4241

4342
Add an object for each subscription in a `$subscribe` object. The object key is the name of the publication and the value is either an array of parameters or a function returning an array of parameters. These subscription will be stopped when the component is destroyed.
4443

45-
```javascript
46-
meteor: {
47-
// Subscriptions
48-
$subscribe: {
49-
// Subscribes to the 'threads' publication with no parameters
50-
'threads': [],
51-
// Subscribes to the 'threads' publication with static parameters
52-
'threads': ['new', 10], // The 10 newest threads
53-
// Subscribes to the 'posts' publication with dynamic parameters
54-
// The subscription will be re-called when a vue reactive property changes
55-
'posts': function() {
56-
// Here you can use Vue reactive properties
57-
return [this.selectedThreadId] // Subscription params
44+
```js
45+
export default {
46+
meteor: {
47+
// Subscriptions
48+
$subscribe: {
49+
// Subscribes to the 'threads' publication with no parameters
50+
'threads': [],
51+
// Subscribes to the 'threads' publication with static parameters
52+
'threads': ['new', 10], // The 10 newest threads
53+
// Subscribes to the 'posts' publication with dynamic parameters
54+
// The subscription will be re-called when a vue reactive property changes
55+
'posts': function() {
56+
// Here you can use Vue reactive properties
57+
return [this.selectedThreadId] // Subscription params
58+
}
5859
}
5960
}
6061
}
@@ -64,17 +65,17 @@ meteor: {
6465
You can also use the `$subscribe(name, ...params)` method in you component code:
6566

6667

67-
```javascript
68+
```js
6869
ready () {
6970
// Subscribes to the 'threads' publication with two parameters
70-
this.$subscribe('thread', 'new', 10);
71+
this.$subscribe('thread', 'new', 10)
7172
}
7273
```
7374

7475
The `$subReady` object on your component contains the state of your subscriptions. For example, to know if the 'thread' subscription is ready, use this *reactive* expression:
7576

76-
```javascript
77-
console.log(this.$subReady.thread);
77+
```js
78+
console.log(this.$subReady.thread)
7879
```
7980

8081
Or in your template:
@@ -86,38 +87,35 @@ Or in your template:
8687
You can also change the default subscription method by defining the `Vue.config.meteor.subscribe` function:
8788

8889

89-
```javascript
90+
```js
9091
// You can replace the default subcription function with your own
9192
// Here we replace the native subscribe() with a cached one
9293
// with the ccorcos:subs-cache package
9394
const subsCache = new SubsCache({
9495
expireAfter: 15,
9596
cacheLimit: -1
96-
});
97+
})
9798

9899
Vue.config.meteor.subscribe = function(...args) {
99-
return subsCache.subscribe(...args);
100-
};
100+
return subsCache.subscribe(...args)
101+
}
101102
```
102103

103104
#### Reactive data
104105

105-
You can make your component `data` properties update from any Meteor reactive sources (like collections or session) by putting an object for each property in the `meteor` object. The object key is the name of the property (it shouldn't start with `$`), and the value is either a function or an object with the following attributes:
106-
107-
- `params()` (optional), a function returning an object, which can use any *Vue* reactive property,
108-
- `update([params])`, a function with optional `params` argument, that returns the value to update the corresponding `data` property of the component. Here you can use *Meteor* reactive sources, but **no Vue reactive property getters**. The `params` argument is the object returned by the `params()` function described above.
106+
You can make your component `data` properties update from any Meteor reactive sources (like collections or session) by putting an object for each property in the `meteor` object. The object key is the name of the property (it shouldn't start with `$`), and the value is a function.
109107

110108
Here is an example:
111109

112-
```javascript
113-
new Vue({
110+
```js
111+
export default {
114112
data() {
115113
return {
116114
selectedThreadId: null,
117115
// We can init the property value in the data() component hook
118116
threads: [],
119117
selectedThread: null
120-
};
118+
}
121119
},
122120
meteor: {
123121
// Subscriptions
@@ -134,77 +132,22 @@ new Vue({
134132
// Here you can use Meteor reactive sources
135133
// like cursors or reactive vars
136134
// as you would in a Blaze template helper
137-
// However, Vue reactive properties will not update
138135
return Threads.find({}, {
139136
sort: {date: -1}
140-
});
137+
})
141138
},
142139
// Selected thread
143140
// This will update the 'selectedThread' object property on component
144-
selectedThread: {
145-
//// Vue Reactivity
146-
// We declare which params depends on reactive vue properties
147-
params () {
148-
// Here you can use Vue reactive properties
149-
// Don't use Meteor reactive sources!
150-
return {
151-
id: this.selectedThreadId
152-
};
153-
},
154-
// Optionally we can watch the parameters for changes in nested
155-
// objects using the 'deep' option
156-
deep: true,
157-
//// Meteor Reactivity
158-
// This will be refresh each time above params changes from Vue
159-
// Then it calls Tracker.autorun() to refresh the result
160-
// each time a Meteor reactive source changes
161-
update ({id}) {
162-
// Here you can use Meteor reactive sources
163-
// like cursors or reactive vars
164-
// Don't use Vue reactive properties!
165-
return Threads.findOne(id);
166-
},
167-
},
168-
},
169-
});
141+
selectedThread () {
142+
return Threads.findOne(this.selectedThreadId)
143+
}
144+
}
145+
})
170146
```
171147

172-
You can skip the data initialization (the default value will be `null`):
173-
174-
```javascript
175-
new Vue({
176-
data() {
177-
return {
178-
selectedThreadId: null,
179-
};
180-
},
181-
meteor: {
182-
// Subscriptions
183-
$subscribe: {
184-
'threads': []
185-
},
186-
// Threads list
187-
threads () {
188-
return Threads.find({}, {
189-
sort: {date: -1}
190-
});
191-
},
192-
// Selected thread
193-
selectedThread: {
194-
params () {
195-
return {
196-
id: this.selectedThreadId
197-
};
198-
},
199-
update ({id}) {
200-
return Threads.findOne(id);
201-
},
202-
},
203-
},
204-
});
205-
```
148+
You can skip the data initialization (the default value will be `null`).
206149

207-
You can then use the reactive data in the template since it's standard Vue component properties:
150+
Use the reactive data in the template:
208151

209152

210153
```html
@@ -218,10 +161,10 @@ You can then use the reactive data in the template since it's standard Vue compo
218161

219162
Or anywhere else in you Vue component:
220163

221-
```javascript
164+
```js
222165
computed: {
223166
count () {
224-
return this.threads.length;
167+
return this.threads.length
225168
}
226169
}
227170
```
@@ -230,7 +173,7 @@ computed: {
230173

231174
You can deactivate and activate again the meteor data on the component with `this.$startMeteor` and `this.$stopMeteor`:
232175

233-
```javascript
176+
```js
234177
export default {
235178
meteor: {
236179
// ...
@@ -243,29 +186,81 @@ export default {
243186

244187
deactivate () {
245188
this.$stopMeteor()
246-
},
247-
},
189+
}
190+
}
248191
}
249192
```
250193

251194
You can also prevent meteor data from starting automatically with `$lazy`:
252195

253-
```javascript
196+
```js
254197
export default {
255198
meteor: {
256199
$lazy: true,
257200
// ...
258-
},
201+
}
259202
}
260203
```
261204

262205
#### Freezing data
263206

264207
This option will apply `Object.freeze` on the Meteor data to prevent Vue from setting up reactivity on it. This can improve the performance of Vue when rendering large collection lists for example. By default, this option is turned off.
265208

266-
```javascript
209+
```js
267210
// Disable Vue reactivity on Meteor data
268-
Vue.config.meteor.freeze = true;
211+
Vue.config.meteor.freeze = true
212+
```
213+
214+
### Components
215+
216+
**Vue 2+ only**
217+
218+
You can use Meteor directly in the template using the Meteor components and scoped slots:
219+
220+
```html
221+
<!-- Subscription -->
222+
<MeteorSub
223+
name="notes"
224+
:parameters="[limit]"
225+
>
226+
<template slot-scope="{ loading }">
227+
<button @click="sort = !sort">Toggle sort</button>
228+
229+
<!-- Reactive Meteor data -->
230+
<MeteorData
231+
:query="findNotes"
232+
class="notes"
233+
>
234+
<template slot-scope="{ data: notes }">
235+
<div v-for="note in notes" class="note">
236+
<div class="text">{{ note.text }}</div>
237+
</div>
238+
</template>
239+
</MeteorData>
240+
241+
<div v-if="loading" class="loading">Loading...</div>
242+
</template>
243+
</MeteorSub>
244+
```
245+
246+
```js
247+
import { Notes } from '../api/collections'
248+
249+
export default {
250+
data () {
251+
return {
252+
sort: true,
253+
}
254+
},
255+
256+
methods: {
257+
findNotes () {
258+
return Notes.find({}, {
259+
sort: { created: this.sort ? -1 : 1 },
260+
})
261+
}
262+
}
263+
}
269264
```
270265

271266
---

0 commit comments

Comments
 (0)
0