@danielturner/lit-state

<lit-state>

A lightweight state management with localstorage persistance.

Installation

#npm i @danielturner/lit-state

Usage

After adding lit-state to your application you need to replace LitElement with LitState for ANY view that is going to be using or managing state.

Example:

import { css, html } from 'lit-element';
import { LitState } from '../../lit-state/index.js';

export class TestState extends LitState {

Setting state in properties is your next step:

  static get properties() {
    return {
      state: {
        type: Object,
      },
    };
  }

Note: Your properties should have more properties than state

Set the initial value for state in the constructor, don't forget to set the keys you are interested in following for this view.

  constructor() {
    super();
    this.state = {
      welcome: '',
      counter: 0,
    };
  }

Note: Your constructor most likely will have more than just state.

One place in your app (possible the app's shell) will control the state. This element is the controller. Place it in your render method.

      <lit-controller></lit-controller>

To initialize a value outside the constructor use the firstUpdated method Calling the notify change triggers a state change across your app.

  firstUpdated() {
    this.notifyChange('welcome', 'Welcome to state');
  }

State changes can be anything, and any time during your apps lifecycle.

  __increment() {
    this.counter += 1;
    this.notifyChange('counter', this.counter);
  }

Or leverage the updated lifecycle.

  updated(changeProperties) {
    changedProperties.forEach((oldValue, propName) => {
      console.log(`${propName} changed. oldValue: ${oldValue}`);
      this.notifyChange(propName, this[propName]);
    });
  }

LitState uses two events stateChanged and stateChangeRequest

It is not recommended to use these to trigger updates.

Configuration

If you want to use sessionStorage instead of localStorage to limit the persistence to the session. Simply change the controller element in the render method to the following.

  <lit-controller sessionStorage>