Multiple components and store variables ($)

README.md

Multiple components and store variables ($)

Just trying (and failing) to work with Svelte's store variables with multiple components.

App.html

<InputAdd></InputAdd>

<List></List>

<script>
	import InputAdd from './InputAdd.html'
	import List from './List.html'

	import { Store } from 'svelte/store.js';
	
	const store = new Store( { todos: [ 'Item 1', 'Item 2' ] }, );
	
	export default {
		
		components: {
			InputAdd,
			List,
		},
		
		store: () => store
	};
	
	window.store = store;
</script>

InputAdd.html

<input bind:value='newTodo' placeholder='buy milk'>
<button on:click='push("$todos", newTodo)'>add todo</button>

<script>
	import { push } from 'svelte-extras';
	
	export default {
		data: function () {
			return {
				newTodo: ''
			};
		},

		methods: {
			push
		},
		
		store: () => window.store
	};
</script>

List.html

<ul>
	{{#each $todos as todo, i}}
		<li>
			<button on:click='splice("$todos", i, 1)'>x</button>
			{{todo}}
		</li>
	{{/each}}
</ul>

<style>
	ul {
		list-style: none;
		padding: 0;
	}
	li button {
		color: rgb(200,0,0);
		background: rgba(200,0,0,0.1);
		border-color: rgba(200,0,0,0.2);
		padding: 0.2em 0.5em;
	}
</style>

<script>
	import { splice } from 'svelte-extras';
	
	export default {
		methods: {
			splice
		},
		
		store: () => window.store
	};
</script>