@doars/doars-store v2.1.0

@doars/doars-store

Plugin that adds a store context for global state management.

Install

From NPM

Install the package from NPM, then import and enable the library in your build.

npm i @doars/doars @doars/doars-store

// Import library.
import Doars from '@doars/doars'
import DoarsStore from '@doars/doars-store'

// Setup a library instance.
const doars = new Doars()

// Setup the plugin.
const doarsStore = DoarsStore(doars /*, options, data */)

// Enable library.
doars.enable()

IIFE build from jsDelivr

Add the IIFE build to the page from for example the jsDelivr CDN and enable the library.

<!-- Import library. -->
<script src="https://cdn.jsdelivr.net/npm/@doars/doars@2/dst/doars.iife.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@doars/doars-store@2/dst/doars-store.iife.js"></script>
<script type="application/javascript">
  document.addEventListener('DOMContentLoaded', () => {
    // Setup a library instance.
    const doars = new window.Doars()

    // Setup the plugin.
    const doarsStore = window.DoarsStore(doars /*, options, data */)

    // Enable library.
    doars.enable()
  })
</script>

ESM and IIFE builds are also available via the jsDelivr CDN.

Contexts

The following contexts are added by the plugin.

\$store

Access the data store object.

Examples

<!-- Read from the data store. -->
<div d-text="$store.message"></div>

<!-- Write to the data store. -->
<div d-on:click="$store.message = 'Hello there!'"></div>

<!-- Access directly if the deconstruct option is set to true. -->
<div d-text="message"></div>

<!-- If the deconstruct option is set, but the same key exists on the state. -->
<div d-state="{ message: 'Hello there!' }">
  <!-- Then 'Hello there!' will be read instead of the value from the data store. -->
  <div d-text="message"></div>
</div>

Directives

The plugin does not add any directives of its own, however the sync directive can used well with the \$store context.

<input type="text" name="message" d-sync="$store.message" />

<input type="text" name="status" d-sync="$store.messenger.status" />

<input type="text" name="message" d-sync:store="message" />

<input type="text" name="message" d-sync="message" />
<!-- Message can only be directly accessed if the deconstruct option is enabled. -->

API

DoarsStore

• constructor Create plugin instance.
  • @param {Doars} library A doars library instance.
  • @param {Object} options = null See options.
  • @param {Object} dataStore = {} Initial data store data.
  • @returns {DoarsStore}
• disable Disables the plugin. Can only be called when the doars is disabled.
• enable Enables the plugin. Can only be called when the doars is disabled.

DoarsStore options

• {Boolean} deconstruct = false Whether to deconstruct the context so when accessing the properties you do not need to prefix it with $store. Do note the $store context will be checked after the $for and $state contexts since the $store context is inserted before the others. This means that when a property exists on both the data store and state the value from the state will be returned.

Compatible versions