npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vuex-dot

v2.5.8

Published

Simplifies two-way data binding and v-model usage on vuex state, providing full reactivity via generated setters/getters

Downloads

289

Readme

vuex-dot tests Coverage Status GitHub license minified bundle

Codepen demo

Vue computed properties getters and/or setters generator with the ability to intercept each property change and dispatch vuex action or commit mutation or just hook your own callback. Also you can use plugins.

The main idea of this tool is to have mapState()-like helper with an ability to set additional configuration using chainable methods.

Motivation

There are some other packages on github - vuex-map-fields and vuex-bound for example, but after reading their docs and sources I've decided to create own package from scratch with such benefits

  • lightweight - 3.41 KB after rollup && babel-minify
  • flexible - actions dispatching and hooks abilities adds to your code one place for handling reactive changes of target. Plugins support gives you full control of your data flow.
  • simple - less code footprint with same features. You need to import only one helper method into your code, which provides a short set of chainable methods for configuring.
  • no foreign code injection to your state - no weird logic ("core" mutations, actions, etc) shall be injected into your vuex store, no additional setup of vuex or vm needed. This tool just generates getters and setters, which are done with performance in mind.
  • dot notation - with usage of very fast and well tested library get-value

Installation

npm i vuex-dot

Usage

State property two way binding (mutation based)

https://codepen.io/anon/pen/ERmBqK

Target.commit(action)

<template>
  <button @click.stop="step++">next</button>
</template>

<script>
  import { takeState } from 'vuex-dot';

  export default {
    computed: {
      step: takeState('wizard.step') 
        .commit('setWizardStep')
        .map()
    }
  }
</script>

store/index.js

export default new Vuex.Store({
  state: {
    wizard: {
      step: 1
    }
  },
  mutations: {
    setWizardStep(state, step) {
      state.wizard.step = step;
    }
  }
});

Target selected object fields exposition (action based)

https://codepen.io/anon/pen/eKWqOm

<template>
  <form>
    <input v-model="name"/>
    <input v-model="email"/>
  </form>
</template>

<script>
  import { takeState } from 'vuex-dot';

  export default {
    computed: {
      ...takeState('user')
        .expose(['name', 'email'])
        .dispatch('editUser')
        .map()
    }
  }
</script>

Exposed target hook usage

<template>
  <form>
    <input v-model="name"/>
    <input v-model="email"/>
  </form>
</template>

<script>
  import { takeState } from 'vuex-dot';
  import validate from 'validate';
  const constraints = {name: {presence: true}}; 

  export default {
    computed: {
      ...takeState('user')
        .expose([
          'name', 
          'email'
        ])
        .hook(({ dispatch }, value, key) => {
          if(validate.single(value, constraints[key])) {
            dispatch('userEditAction', { key, value });
          }
        })
        .map()
    }
  }
</script>

API reference

Classes

Functions

Target

Target mapper

new Target(path)

| Param | Type | Description | | --- | --- | --- | | path | string | dot-notation path to some property of your vm instance |

target.expose(projection) ⇒ TargetExposition

Should be used if you need to map some properties of the object, selected as a target into your computed properties. It allows to attach action dispatcher or hook callback on each property change.

Also, both dispatch() and hook() can provide object mapped by Target instance to the callee, while setting the second argument true (you can read more in the documentation for them)

| Param | Type | Description | | --- | --- | --- | | projection | array | target object properties to be exposed |

target.commit(mutation) ⇒ Target

In fact, that's syntax sugar for hook() method.

Sets mutation to be commited on mapped property change

mutation shall be called in the format:

commit(mutation, newValue)

| Param | Type | Description | | --- | --- | --- | | mutation | string | mutation name |

target.dispatch(action) ⇒ Target

In fact, that's syntax sugar for hook() method.

Sets action to be dispatched on mapped property change

Your action shall be called in the format:

dispatch(action, newValue)

| Param | Type | Description | | --- | --- | --- | | action | string | action name |

target.hook(dispatcher) ⇒ Target

Set hook that should be run on mapped property change.

| Param | Type | | --- | --- | | dispatcher | dispatcher |

target.map(alias) ⇒ *

returns computed property pair of getters or/and setters for specified projection.

If an alias is set, it can be used with spread operator setting provided alias as the computed property name

| Param | Type | Description | | --- | --- | --- | | alias | String | name of computed field target to be accessible |

target.use(plugin) ⇒ Target

apply plugin

plugin is described by object, composed in such format:

{
  setter: function(key, value, nextSetter) { //setter is mandatory
    nextSetter(value);
  },
  getter: function(key, nextGetter) { //getter is optional
    return nextGetter();
  },
  inject: { // optional, here you can describe additional fields, you want to inject into result map
    $internal: {
      get() { ... },
      set(value) { ... }
    }
  }
}

| Param | Type | Description | | --- | --- | --- | | plugin | Object | object, describing your plugin. |

Target~dispatcher : function

| Param | Type | Description | | --- | --- | --- | | store | Store | vuex store | | value | mixed | |

TargetExposition

Exposes some properties of target object into computed properties compatible bunch of getters or/and setters

new TargetExposition(target, projection)

| Param | Type | | --- | --- | | target | Target | | projection | Array |

targetExposition.commit(mutation, sendTarget) ⇒ TargetExposition

Sets mutation to be commited on exposed field change if sendTarget is false, action shall be called in format:

commit(mutation, { key, value })

otherwise, if sendTarget is set to true

commit(mutation, { target, key, value })

Hint: That's just syntax sugar for hook() method.

| Param | Type | Default | Description | | --- | --- | --- | --- | | mutation | String | | name of mutation | | sendTarget | Boolean | false | send target to action |

targetExposition.dispatch(action, sendTarget) ⇒ TargetExposition

Sets action to be dispatched on exposed field change. if sendTarget is false, action shall be called in format:

dispatch(action, { key, value })

otherwise, if sendTarget is set to true

dispatch(action, { target, key, value })

Hint: That's just syntax sugar for hook() method.

| Param | Type | Default | Description | | --- | --- | --- | --- | | action | String | | name of action | | sendTarget | Boolean | false | send target to action |

targetExposition.hook(dispatcher, sendTarget) ⇒ TargetExposition

set callback to be run on property change

| Param | Type | | --- | --- | | dispatcher | dispatcher | | sendTarget | Boolean |

targetExposition.map() ⇒ Object

generates map of getters or/and setters for specified projection

targetExposition.use(plugin) ⇒ TargetExposition

look Target.use(plugin)

| Param | | --- | | plugin |

TargetExposition~dispatcher : function

| Param | Type | Description | | --- | --- | --- | | store | Store | vuex store | | value | * | changed value | | key | String | key of changed field | | target | * | parent object of changed field |

take(path) ⇒ Target

returns Target instance with specified path

| Param | Type | Description | | --- | --- | --- | | path | string | dotted path to target property of your component instance |

takeState(namespace, path) ⇒ Target

returns Target instance with specified state path

| Param | | --- | | namespace | | path |