julien-r44 / lit-valtio-state Goto Github PK

import { defineState } from '@julr/lit-valtio-state'

export const appState = defineState({
  count: 0,
  name: 'John Doe'
})

import { LitElement, html } from 'lit'
import { customElement } from 'lit/decorators.js'
import { useState } from '@julr/lit-valtio-state'
import { appState } from '@/stores/app'

@customElement('my-lit-component')
export class MyLitComponent extends LitElement {
  private state = useState(this, appState)

  render() {
    return html`
      <div>
        <h1>${this.state.name}</h1>
        <p>${this.state.count}</p>
        <button @click=${() => this.state.count++}>Increment</button>
      </div>
    `
  }
}