example of an encapsulated vuex store using typescript
Switch branches/tags
Nothing to show
Clone or download
Maximilian Stroh
Maximilian Stroh init
Latest commit fddf603 Jan 18, 2017
Permalink
Failed to load latest commit information.
src init Jan 18, 2017
test init Jan 18, 2017
.gitignore init Jan 18, 2017
.npmignore init Jan 18, 2017
README.md init Jan 18, 2017
package.json init Jan 18, 2017
tsconfig.json init Jan 18, 2017

README.md

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