`count` variable revert

pull/7180/head
nazar-lazarchuk 5 years ago
parent bb147ea594
commit 876539f78b

@ -1,17 +1,17 @@
<script> <script>
import { counter } from './stores.js'; import { count } 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 counterValue; let countValue;
const unsubscribe = counter.subscribe(value => { const unsubscribe = count.subscribe(value => {
counterValue = value; countValue = value;
}); });
</script> </script>
<h1>The counter is {counterValue}</h1> <h1>The count is {countValue}</h1>
<Incrementer/> <Incrementer/>
<Decrementer/> <Decrementer/>

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

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

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

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

@ -1,11 +1,11 @@
<script> <script>
import { counter } from './stores.js'; import { count } 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';
</script> </script>
<h1>The counter is {$counter}</h1> <h1>The count is {$count}</h1>
<Incrementer/> <Incrementer/>
<Decrementer/> <Decrementer/>

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

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

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

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

@ -1,9 +1,9 @@
<script> <script>
import { counter } from './stores.js'; import { count } from './stores.js';
</script> </script>
<h1>The counter is {$counter}</h1> <h1>The count is {$count}</h1>
<button on:click={counter.increment}>+</button> <button on:click={count.increment}>+</button>
<button on:click={counter.decrement}>-</button> <button on:click={count.decrement}>-</button>
<button on:click={counter.reset}>reset</button> <button on:click={count.reset}>reset</button>

@ -1,6 +1,6 @@
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
function createCounter() { function createCount() {
const { subscribe, set, update } = writable(0); const { subscribe, set, update } = writable(0);
return { return {
@ -11,4 +11,4 @@ function createCounter() {
}; };
} }
export const counter = createCounter(); export const count = createCount();

@ -1,17 +1,17 @@
<script> <script>
import { counter } from './stores.js'; import { count } 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 counterValue; let countValue;
counter.subscribe(value => { const unsubscribe = count.subscribe(value => {
counterValue = value; countValue = value;
}); });
</script> </script>
<h1>The counter is {counterValue}</h1> <h1>The count is {countValue}</h1>
<Incrementer/> <Incrementer/>
<Decrementer/> <Decrementer/>

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

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

@ -1,5 +1,5 @@
<script> <script>
import { counter } from './stores.js'; import { count } 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 counter = writable(0); export const count = writable(0);

@ -1,17 +1,17 @@
<script> <script>
import { counter } from './stores.js'; import { count } 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 counterValue; let countValue;
counter.subscribe(value => { count.subscribe(value => {
counterValue = value; countValue = value;
}); });
</script> </script>
<h1>The counter is {counterValue}</h1> <h1>The count is {countValue}</h1>
<Incrementer/> <Incrementer/>
<Decrementer/> <Decrementer/>

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

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

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

@ -1,3 +1,3 @@
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
export const counter = writable(0); export const count = 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`, `counter` is a store, and we're setting `counterValue` in the `counter.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`, `count` is a store, and we're setting `countValue` in the `count.subscribe` callback.
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`. 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`.
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() {
counter.update(n => n + 1); count.update(n => n + 1);
} }
``` ```
@ -22,6 +22,6 @@ Finally, in `Resetter.svelte`, implement `reset`:
```js ```js
function reset() { function reset() {
counter.set(0); count.set(0);
} }
``` ```

@ -1,17 +1,17 @@
<script> <script>
import { counter } from './stores.js'; import { count } 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 counterValue; let countValue;
counter.subscribe(value => { count.subscribe(value => {
counterValue = value; countValue = value;
}); });
</script> </script>
<h1>The counter is {counterValue}</h1> <h1>The count is {countValue}</h1>
<Incrementer/> <Incrementer/>
<Decrementer/> <Decrementer/>

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

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

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

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

@ -1,11 +1,11 @@
<script> <script>
import { counter } from './stores.js'; import { count } 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';
</script> </script>
<h1>The counter is {$counter}</h1> <h1>The count is {$count}</h1>
<Incrementer/> <Incrementer/>
<Decrementer/> <Decrementer/>

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

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

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

@ -1,3 +1,3 @@
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
export const counter = writable(0); export const count = 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`: Start by declaring `unsubscribe` in `App.svelte`:
```js ```js
const unsubscribe = counter.subscribe(value => { const unsubscribe = count.subscribe(value => {
counterValue = value; countValue = value;
}); });
``` ```
> Calling a `subscribe` method returns an `unsubscribe` function. > 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 ```html
<script> <script>
import { onDestroy } from 'svelte'; import { onDestroy } from 'svelte';
import { counter } from './stores.js'; import { count } 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 counterValue; let countValue;
const unsubscribe = counter.subscribe(value => { const unsubscribe = count.subscribe(value => {
counterValue = value; countValue = value;
}); });
onDestroy(unsubscribe); onDestroy(unsubscribe);
</script> </script>
<h1>The counter is {counterValue}</h1> <h1>The count is {countValue}</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 `$`: 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 ```html
<script> <script>
import { counter } from './stores.js'; import { count } 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';
</script> </script>
<h1>The counter is {$counter}</h1> <h1>The count is {$count}</h1>
``` ```
> Auto-subscription only works with store variables that are declared (or imported) at the top-level scope of a component. > 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 `$counter` 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 `$count` 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. > 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.

@ -1,9 +1,9 @@
<script> <script>
import { counter } from './stores.js'; import { count } from './stores.js';
</script> </script>
<h1>The counter is {$counter}</h1> <h1>The count is {$count}</h1>
<button on:click={counter.increment}>+</button> <button on:click={count.increment}>+</button>
<button on:click={counter.decrement}>-</button> <button on:click={count.decrement}>-</button>
<button on:click={counter.reset}>reset</button> <button on:click={count.reset}>reset</button>

@ -1,6 +1,6 @@
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
function createCounter() { function createCount() {
const { subscribe, set, update } = writable(0); const { subscribe, set, update } = writable(0);
return { return {
@ -11,4 +11,4 @@ function createCounter() {
}; };
} }
export const counter = createCounter(); export const count = createCount();

@ -1,9 +1,9 @@
<script> <script>
import { counter } from './stores.js'; import { count } from './stores.js';
</script> </script>
<h1>The counter is {$counter}</h1> <h1>The count is {$count}</h1>
<button on:click={counter.increment}>+</button> <button on:click={count.increment}>+</button>
<button on:click={counter.decrement}>-</button> <button on:click={count.decrement}>-</button>
<button on:click={counter.reset}>reset</button> <button on:click={count.reset}>reset</button>

@ -1,6 +1,6 @@
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
function createCounter() { function createCount() {
const { subscribe, set, update } = writable(0); const { subscribe, set, update } = writable(0);
return { return {
@ -11,4 +11,4 @@ function createCounter() {
}; };
} }
export const counter = createCounter(); export const count = createCount();

@ -4,10 +4,10 @@ title: Custom stores
As long as an object correctly implements the `subscribe` method, it's a store. Beyond that, anything goes. It's very easy, therefore, to create custom stores with domain-specific logic. As long as an object correctly implements the `subscribe` method, it's a store. Beyond that, anything goes. It's very easy, therefore, to create custom stores with domain-specific logic.
For example, the `counter` store from our earlier example could include `increment`, `decrement` and `reset` methods and avoid exposing `set` and `update`: For example, the `count` store from our earlier example could include `increment`, `decrement` and `reset` methods and avoid exposing `set` and `update`:
```js ```js
function createCounter() { function createCount() {
const { subscribe, set, update } = writable(0); const { subscribe, set, update } = writable(0);
return { return {

Loading…
Cancel
Save