Native Package Manager

    way2web-vuex-store

    0.2.10 • Public • Published

    way2web-vuex-store

    NPM version Coveralls Status

    With the way2web-vuex-store package you can easy create stores with a default base. If you add an array of items in multiple stores, this package can reduce your VueX files a lot. And all stores will do the same.

    Depends on

    Installation

    npm install way2web-vuex-store or yarn add way2web-vuex-store

    Test the package

    npm run test:unit or yarn test:unit

    Default store

    If you would add a store just based on the package store:

    import { createVuexStore } from 'way2web-vuex-store';
    
    export default { ...createVuexStore() };
    

    Default state

    • items

    Items is an array of objects, with a id.

    Default getters

    • items
    • item
    • firstItem
    • can

    Items getter

    With the items getter you receive all items. e.g.

    [
        {
            id: 1,
            name: 'First'
        },
        {
            id: 2,
            name: 'Second'
        }
    ]
    

    Item getter

    With the item getter you receive a single item based on the id e.g.

    computed: {
        ...mapGetters({
            itemAction: 'exampleStore/item'
        }),
        item() {
            return this.itemAction(id);
        }
    }
    

    or

    store.getters["exampleStore1/item"](id)
    

    Result is e.g.:

    {
        id: 1,
        name: 'First'
    }
    

    First item getter

    With the firstItem getter you receive a the first item based e.g.

    computed: {
        ...mapGetters({
            firstItem: 'exampleStore/firstItem'
        })
    }
    

    or

    store.getters["exampleStore1/firstItem"]
    

    Result is e.g.:

    {
        id: 1,
        name: 'First'
    }
    

    Can getters

    With the can getter you can check on policies. Every item need an array named available_actions.

    e.g.

    [
        {
            id: 1,
            name: 'First',
            available_actions: ['exampleAction']
        },
        {
            id: 2,
            name: 'Second',
            available_actions: ['exampleAction']
        }
    ]
    

    You can check the policy like:

    computed: {
        ...mapGetters({
            exampleCan: 'exampleStore/can'
        }),
        examplePolicy() {
            this.exampleCan({ id: 1 }, 'exampleAction');
        }
    }
    

    or

    store.getters["exampleStore/can"]({
        item: { id: 1 },
        action: "exampleAction"
    })
    

    Default actions

    • updateItems
    • addItem
    • updateItem
    • removeItem
    • reset

    Payload updateItems

    You have to send an array of objects to updateItems. Every object need a id. e.g.

    [
        {
            id: 1,
            name: 'First'
        },
        {
            id: 2,
            name: 'Second'
        }
    ]
    

    Payload addItem, updateItem, removeItem

    You have to send an objects to addItem, updateItem and removeItem. Every object need a id. e.g.

    {
        id: 1,
        name: 'First'
    }
    

    Reset action

    For the reset action, you dont have to send payload, it just reset the items array.

    Customize

    You can add and overrule the store by adding it to the createVuexStore method. You can overule namespaced, and add or overrule state, getters, actions and mutations.

    e.g.

    createVuexStore({
        namespaced: true,
        state: {
            example: null
        },
        getters: {
            example: state => state.example
        },
        actions: {
            testExample({ commit }, example) {
                commit("setExample", example);
            }
        },
        mutations: {
            setExample(state, example) {
                state.example = example;
            }
        }
    });
    

    Keywords

    none

    Install

    npm i way2web-vuex-store

    DownloadsWeekly Downloads

    12

    Version

    0.2.10

    License

    none

    Unpacked Size

    11.5 kB

    Total Files

    6

    Last publish

    Collaborators

    • pkeulers
    • johanvanhelden
    • elwinvaneede
    • tomw2w
    • w3news