Web Components API Generic

Example

Direct in store/index.js

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import { createModule } from '@dynapp/wc-api-generic'

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    <module>: createModule({
      entitySingular: '<module_item_singular>',
      entityPlural: '<module_item_plural>'
    })
  }
});

Separate module file

store/modules/<module>.js

import { createModule } from '@dynapp/wc-api-generic'

export default createModule({
  entitySingular: '<module_item_singular>',
  entityPlural: '<module_item_plural>'
});

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import <module> from './modules/<module>'

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    <module>
  }
});

Getters

items

Get list of items.

this.$store.getters['<module>/items']

getItemById

Get an item by its id.

Getter is callable with the id as parameter.

this.$store.getters['<module>/getItemById'](<id>)

filterItems

Get a filtered list of items.

Getter is callable with the filter function as parameter.

this.$store.getters['<module>/filterItems'](<filter_function>)

getAttachmentUrl

Get attachment url.

Returns null If the attachment does not exist.

Getter is callable with the id and attachment name as parameters.

this.$store.getters['<module>/getAttachmentUrl'](<id>, <attachment>)

getUploadProgressById

Get upload progress for s specific item.

Returns a percentage, 0 - 100.

Returns null if no upload progress exists for the given id.

this.$store.getters['<module>/getUploadProgressById'](<id>)

getDownloadProgressById

Get download progress for s specific item.

Returns a percentage, 0 - 100.

Returns null if no download progress exists for the given id.

this.$store.getters['<module>/getDownloadProgressById'](<id>)

newId

Get id generator.

Returns a function for generating new ids.

this.$store.getters['<module>/newId']

Mutations

setItems

this.$store.commit('<module>/setItems', <items>)

addItem

this.$store.commit('<module>/addItem', <item>)

replaceItem

this.$store.commit('<module>/replaceItem', <item>)

replaceItems

this.$store.commit('<module>/replaceItems', <items>)

removeItem

this.$store.commit('<module>/removeItem', <id>)

setUploadProgress

Takes a payload with id and value.

this.$store.commit('<module>/setUploadProgress', <payload>)

unsetUploadProgress

this.$store.commit('<module>/unsetUploadProgress', <id>)

setDownloadProgress

Takes a payload with id and value.

this.$store.commit('<module>/setDownloadProgress', <payload>)

unsetDownloadProgress

this.$store.commit('<module>/unsetDownloadProgress', <id>)

Actions

createItem

Create an item. Makes a request to the server then adds the item to the store.

Returns a Promise to be able to act once the action is completed.

this.$store.dispatch('<module>/createItem', <item>)

updateItem

Update an existing item. Makes a request to the server then updates the item in the store.

Returns a Promise to be able to act once the action is completed.

this.$store.dispatch('<module>/updateItem', <item>)

updateItems

Update multiple existing items. Makes a request to the server then updates the items in the store.

This action does not support attachments.

Returns a Promise to be able to act once the action is completed.

this.$store.dispatch('<module>/updateItems', <items>)

fetchItems

Fetches a list of items and save them to the store.

Returns a Promise to be able to act once the action is completed.

this.$store.dispatch('<module>/fetchItems')

fetchItemById

Fetches a single item and saves it to the store.

Returns a Promise to be able to act once the action is completed.

this.$store.dispatch('<module>/fetchItemById', <id>)

deleteItem

Delete an existing item. Makes a request to the server then updates the store.

Returns a Promise to be able to act once the action is completed.

this.$store.dispatch('<module>/deleteItem', <id>)

cloneItem

Clone an existing item. Makes a request to the server then updates the store.

Returns a Promise to be able to act once the action is completed.

this.$store.dispatch('<module>/cloneItem', <id>)