[docs] 01-writable-stores: naming update, snake_case replaced to camelCase

pull/7180/head
nazar-lazarchuk 5 years ago
parent 787c34ceec
commit b246192a91

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

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

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

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

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

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

@ -1,5 +1,5 @@
<script> <script>
import { count } from './stores.js'; import { counter } from './stores.js';
function decrement() { function decrement() {
// TODO decrement the count // TODO decrement the count

@ -1,5 +1,5 @@
<script> <script>
import { count } from './stores.js'; import { counter } from './stores.js';
function increment() { function increment() {
// TODO increment the count // TODO increment the count

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

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

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

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

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

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

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

@ -4,15 +4,15 @@ title: Writable stores
Not all application state belongs inside your application's component hierarchy. Sometimes, you'll have values that need to be accessed by multiple unrelated components, or by a regular JavaScript module. Not all application state belongs inside your application's component hierarchy. Sometimes, you'll have values that need to be accessed by multiple unrelated components, or by a regular JavaScript module.
In Svelte, we do this with *stores*. A store is simply an object with a `subscribe` method that allows interested parties to be notified whenever the store value changes. In `App.svelte`, `count` is a store, and we're setting `count_value` in the `count.subscribe` callback. In Svelte, we do this with *stores*. A store is simply an object with a `subscribe` method that allows interested parties to be notified whenever the store value changes. In `App.svelte`, `counter` is a store, and we're setting `counterValue` in the `counter.subscribe` callback.
Click the `stores.js` tab to see the definition of `count`. It's a *writable* store, which means it has `set` and `update` methods in addition to `subscribe`. Click the `stores.js` tab to see the definition of `counter`. It's a *writable* store, which means it has `set` and `update` methods in addition to `subscribe`.
Now go to the `Incrementer.svelte` tab so that we can wire up the `+` button: Now go to the `Incrementer.svelte` tab so that we can wire up the `+` button:
```js ```js
function increment() { function increment() {
count.update(n => n + 1); counter.update(n => n + 1);
} }
``` ```
@ -22,6 +22,6 @@ Finally, in `Resetter.svelte`, implement `reset`:
```js ```js
function reset() { function reset() {
count.set(0); counter.set(0);
} }
``` ```

Loading…
Cancel
Save