Giter Club home page Giter Club logo

vuex-store-module-example's Introduction

vuex-store-module-example

Vuex-Module for "Persons" configuration. Persons can be any combination of (adults, juveniles, children) with a sum between 1 and 4. In addition, there must be exactly one person that could be 18 (so: 1 adult or 1 juvenile must exist).

Features

The default configuration is:

{
    adults: 2,
    juveniles: 0,
    children: 0
}

If you try to decrease the last adult, when juveniles already is 0, juveniles will be increased to 1 to satisfy the constraint. The same applies vice versa when adults is 0 and you decrease the last juvenile.

This module is auto-namespaced by default.

Installation

npm install --save vuex-store-module-example

Usage

// import your functions as needed
import { Persons } from 'vuex-store-module-example'

// initialize it within a store, because it's a class you can instantiate multiples
new Vuex.Store({
    //...
    modules: {
        foo: {
            persons: new Persons()
        },
        bar: {
            persons: new Persons()
        }
    }
    //...
})

Extending/Change events

The functionality within the package is tested and works as-is. But sometimes you might want to do something if the state of this module changes internally through a mutation. In this case, vuex provides a simple mechanism to interact with such encapsulated stores/modules: Plugins.

With these plugin-functions you can subscribe to the internal store's state changes (aka: mutations) and do something when stuff happens. This module can take an array of plugins on instantiation, so high-level code can orchestrate business-rules on low-level modules easily and cleary separated.

Example:

import { Persons } from 'vuex-store-module-example'

// create a plugin, which is basically just a function that receives the store
const myPlugin = (store) => {
    store.subscribe(mutation, state) => {
        if (mutation.type === 'DEC') {
            // do something, for example update another store somewhere
        }
    }
}

// initialize a store with the module, including the plugin from above
new Vuex.Store({
    //...
    modules: {
        foo: {
            persons: new Persons([myPlugin])
        }
    }
    //...
})

// if you now dispatch 'foo/persons/dec' somewhere, the plugin code will fire

vuex-store-module-example's People

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.