[docs] 02-auto-substrictions: naming update, snake_case replaced to camelCase

pull/7180/head
nazar-lazarchuk 5 years ago
parent b246192a91
commit 9a28199d79

@ -1,11 +1,11 @@
<script>
import { count } from './stores.js';
import { counter } from './stores.js';
import Incrementer from './Incrementer.svelte';
import Decrementer from './Decrementer.svelte';
import Resetter from './Resetter.svelte';
</script>
<h1>The count is {$count}</h1>
<h1>The counter is {$counter}</h1>
<Incrementer/>
<Decrementer/>

@ -1,8 +1,8 @@
<script>
import { count } from './stores.js';
import { counter } from './stores.js';
function decrement() {
count.update(n => n - 1);
counter.update(n => n - 1);
}
</script>

@ -1,8 +1,8 @@
<script>
import { count } from './stores.js';
import { counter } from './stores.js';
function increment() {
count.update(n => n + 1);
counter.update(n => n + 1);
}
</script>

@ -1,8 +1,8 @@
<script>
import { count } from './stores.js';
import { counter } from './stores.js';
function reset() {
count.set(0);
counter.set(0);
}
</script>

@ -1,3 +1,3 @@
import { writable } from 'svelte/store';
export const count = writable(0);
export const counter = writable(0);

@ -1,17 +1,17 @@
<script>
import { count } from './stores.js';
import { counter } from './stores.js';
import Incrementer from './Incrementer.svelte';
import Decrementer from './Decrementer.svelte';
import Resetter from './Resetter.svelte';
let count_value;
let counterValue;
count.subscribe(value => {
count_value = value;
counter.subscribe(value => {
counterValue = value;
});
</script>
<h1>The count is {count_value}</h1>
<h1>The counter is {counterValue}</h1>
<Incrementer/>
<Decrementer/>

@ -1,8 +1,8 @@
<script>
import { count } from './stores.js';
import { counter } from './stores.js';
function decrement() {
count.update(n => n - 1);
counter.update(n => n - 1);
}
</script>

@ -1,8 +1,8 @@
<script>
import { count } from './stores.js';
import { counter } from './stores.js';
function increment() {
count.update(n => n + 1);
counter.update(n => n + 1);
}
</script>

@ -1,8 +1,8 @@
<script>
import { count } from './stores.js';
import { counter } from './stores.js';
function reset() {
count.set(0);
counter.set(0);
}
</script>

@ -1,3 +1,3 @@
import { writable } from 'svelte/store';
export const count = writable(0);
export const counter = writable(0);

@ -1,11 +1,11 @@
<script>
import { count } from './stores.js';
import { counter } from './stores.js';
import Incrementer from './Incrementer.svelte';
import Decrementer from './Decrementer.svelte';
import Resetter from './Resetter.svelte';
</script>
<h1>The count is {$count}</h1>
<h1>The counter is {$counter}</h1>
<Incrementer/>
<Decrementer/>

@ -1,8 +1,8 @@
<script>
import { count } from './stores.js';
import { counter } from './stores.js';
function decrement() {
count.update(n => n - 1);
counter.update(n => n - 1);
}
</script>

@ -1,8 +1,8 @@
<script>
import { count } from './stores.js';
import { counter } from './stores.js';
function increment() {
count.update(n => n + 1);
counter.update(n => n + 1);
}
</script>

@ -1,8 +1,8 @@
<script>
import { count } from './stores.js';
import { counter } from './stores.js';
function reset() {
count.set(0);
counter.set(0);
}
</script>

@ -1,3 +1,3 @@
import { writable } from 'svelte/store';
export const count = writable(0);
export const counter = writable(0);

@ -7,8 +7,8 @@ The app in the previous example works, but there's a subtle bug — the store is
Start by declaring `unsubscribe` in `App.svelte`:
```js
const unsubscribe = count.subscribe(value => {
count_value = value;
const unsubscribe = counter.subscribe(value => {
counterValue = value;
});
```
> Calling a `subscribe` method returns an `unsubscribe` function.
@ -18,38 +18,38 @@ You now declared `unsubscribe`, but it still needs to be called, for example thr
```html
<script>
import { onDestroy } from 'svelte';
import { count } from './stores.js';
import { counter } from './stores.js';
import Incrementer from './Incrementer.svelte';
import Decrementer from './Decrementer.svelte';
import Resetter from './Resetter.svelte';
let count_value;
let counterValue;
const unsubscribe = count.subscribe(value => {
count_value = value;
const unsubscribe = counter.subscribe(value => {
counterValue = value;
});
onDestroy(unsubscribe);
</script>
<h1>The count is {count_value}</h1>
<h1>The counter is {counterValue}</h1>
```
It starts to get a bit boilerplatey though, especially if your component subscribes to multiple stores. Instead, Svelte has a trick up its sleeve — you can reference a store value by prefixing the store name with `$`:
```html
<script>
import { count } from './stores.js';
import { counter } from './stores.js';
import Incrementer from './Incrementer.svelte';
import Decrementer from './Decrementer.svelte';
import Resetter from './Resetter.svelte';
</script>
<h1>The count is {$count}</h1>
<h1>The counter is {$counter}</h1>
```
> Auto-subscription only works with store variables that are declared (or imported) at the top-level scope of a component.
You're not limited to using `$count` inside the markup, either — you can use it anywhere in the `<script>` as well, such as in event handlers or reactive declarations.
You're not limited to using `$counter` inside the markup, either — you can use it anywhere in the `<script>` as well, such as in event handlers or reactive declarations.
> Any name beginning with `$` is assumed to refer to a store value. It's effectively a reserved character — Svelte will prevent you from declaring your own variables with a `$` prefix.

Loading…
Cancel
Save