diff --git a/site/content/docs/01-component-format.md b/site/content/docs/01-component-format.md index 33b4e6bf26..926b261083 100644 --- a/site/content/docs/01-component-format.md +++ b/site/content/docs/01-component-format.md @@ -147,8 +147,29 @@ If a statement consists entirely of an assignment to an undeclared variable, Sve --- +A *store* is any object that allows reactive access to a value via a simpler *store contract*. + +A store must contain a `.subscribe` method, which much accept as its argument a subscription function. This subscription function must be immediately and synchronously called with the store's current value upon calling `.subscribe`. All of a store's active subscription functions must later be synchronously called whenever the store's value changes. The `.subscribe` method must also return an unsubscription function. Calling an unsubscription function must stop its subscription, and its corresponding subscription function must not be called again by the store. + +A store may optionally contain a `.set` method, which must accept as its argument a new value for the store, and which synchronously calls all of the store's active subscription functions. Such a store is calls a *writable store*. + +```js +const unsubscribe = store.subscribe(value => { + console.log(value); +}); // logs `value` + +// later... +unsubscribe(); +``` + +The [`svelte/store` module](docs#svelte_store) contains a minimal store implementation. + +--- + Any time you have a reference to a store, you can access its value inside a component by prefixing it with the `$` character. This causes Svelte to declare the prefixed variable, and set up a store subscription that will be unsubscribed when appropriate. +Assignments to `$`-prefixed variables require that the variable be a writable store, and will result in a call to the store's `.set` method. + Note that the store must be declared at the top level of the component — not inside an `if` block or a function, for example. Local variables (that do not represent store values) must *not* have a `$` prefix. @@ -162,6 +183,9 @@ Local variables (that do not represent store values) must *not* have a `$` prefi count.set(1); console.log($count); // logs 1 + + $count = 2; + console.log($count); // logs 2 ``` diff --git a/site/content/docs/03-run-time.md b/site/content/docs/03-run-time.md index 3552552767..8d34c60f42 100644 --- a/site/content/docs/03-run-time.md +++ b/site/content/docs/03-run-time.md @@ -212,39 +212,7 @@ Events dispatched from child components can be listened to in their parent. Any ### `svelte/store` -The `svelte/store` module exports functions for creating [stores](tutorial/writable-stores). - ---- - -To be considered a store, an object must have a `subscribe` method that returns an `unsubscribe` function. - -```js -const unsubscribe = store.subscribe(value => { - console.log(value); -}); // logs `value` - -// later... -unsubscribe(); -``` - ---- - -Stores have special significance inside Svelte components. Their values can be read by prefixing the store's name with the `$` character, which causes Svelte to set up subscriptions and unsubscriptions automatically during the component's lifecycle. - -```html - - - -``` +The `svelte/store` module exports functions for creating [stores](docs#4_Prefix_stores_with_$_to_access_their_values). #### `writable`