oleg
/
spruce


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445
							<html>
    <head>
        <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
    </head>
    <body>
        <div x-data>
            <span x-text="$store.application.name"></span>
            <button @click="$store.application.toggle()">Click</button>
        </div>

        <div x-data>
            <code>Persisted</code>
            <input type="text" x-model="$store.persisted.example">
            <button type="button" @click="$store.persisted.method()">
                Call method on persisted store
            </button>
        </div>

        <script src="../dist/spruce.umd.js"></script>

        <script>
            Spruce.store('application', {
                name: 'Application',
                toggle() {
                    this.name = ['Application', 'Example'][Math.floor(Math.random() * 2)]
                }
            })

            Spruce.store('persisted', {
                example: 'Hello',
                method() {
                    console.log('test')
                }
            }, true)

            Spruce.watch('application.name', () => {
                Spruce.store('persisted').example = 'World';
            });

            Spruce.watch('persisted.example', () => {
                console.log('World!');
            })
        </script>
    </body>
</html>