way2web-vuex-store

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

• Vue.js 2
• VueX 3

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;
        }
    }
});