Web Components API Loading

Example

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import loading from '@dynapp/wc-api-loading'

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    loading
  }
});

In component

this.$store.getters.isLoadingFor('news.*');

Getters

isLoading

Boolean whether any objects are being handled in any way (i.e. created, updated, fetched, deleted)

this.$store.getters.isLoading

isLoadingFor

Boolean whether any objects matching the given topic are being handled.

Getter is callable with the topic/topics as parameter.

The topic is separated by . and typically consists of two parts, an object type and an action, for example news.read.

This module is intended to use with @dynapp/wc-api-generic, which uses its entityPlural-value as the object type, and it sets the following actions:

• create - Creating a new object
• update - Updating an existing object/objects
• read - Fetching an object/objects
• remove - Removeing an object/objects

You can also use * to signify a wildcard. For example the topic '*.read' would allow you to "follow" any read-requests regardless of object type. Similarly news.* would react to any actions on objects of the type news.

Mutations

startLoading

Register an active/to be active "action".

this.$store.commit('startLoading', '<topic>')

endLoading

Register the completion of an "action".

this.$store.commit('endLoading', '<topic>')