Custom Components

The Store for Objects

Home

Help Center

Custom Components

You have access to the Vuex Store for managing your component state.

Here's some examples of what you can do with it.

General Usage

Access the store in this way:

this.$store

You can call certain methods on the store.

.getters[] .dispatch()

Current User

You can access the current_user access_token for making API calls to Vulcan endpoints to access the User data.

this.$store.getters['user/token']

State Mutations via Actions

Actions are similar to state mutations, but they have some differences:

Instead of mutating the state, actions commit mutations
Action can contain arbitrary asynchronous operations

They are triggered using the dispatch() method.

Available Actions

Current Object

You can access the instance of the Object that the component is in.

You can do this by creating a hidden prop.

props: {
baseObject: {
name: "baseObject",
type: Object,
hidden: true
}
}

you can then reference it:

const {id, info} = this.baseObject;

Let's say you want to then update the Object. We have an action for that.

this.$store.dispatch('object/update', {id, info: SomeNewInfo});

Let's look at some examples of how you can use this to modify your Object's properties.

Here's what our Object data structure looks like.

{
"id": String,
"symbol_id": String,
"type": String,
"position": {
"x": Number,
"y": Number
},
"created_at": DateTime,
"updated_at": DateTime,
"size": {
"width": Number,
"height": Number
},
"info_id": Number,
"connection": Array,
"chart_id": String,
"chart_name": String,
"info": {
"id": Number,
"chart_link": null,
"person_id": null,
"organisation_id": null,
"title": null,
"description": String,
"addons": {
"custom": []
},
"image": null,
"content": null,
"component": {},
"settings": {
"title": String,
"notes": String,
"image": {},
"addons": [
{
"name": String,
"value": String
},
...
],
"notesLines": [
{
"id": String,
"type": String,
"content": String
},
...
]
}
}
}

Change the Title

const {id, info} = this.baseObject;
const newInfo = {
...info,
settings: {
...info.settings,
title: "This is my new title"
}
}
this.$store.dispatch('object/update', {id, info: newInfo});

Adding new Note Lines to text editor

There's a couple of ways you can approach this…

Option 1 (recommended):

const {id, info} = this.baseObject;
info.settings.notesLines.push({
id: this.$uuidKey(),
type: "Text",
content: "My text to add to the notes"
});

this.$store.dispatch('object/update', {id, info})

Option 2

const {id, info} = this.baseObject;
const newInfo = {
...info,
settings: {
...info.settings,
notesLines: [...info.settings.notesLines, {id: this.$uuidKey, type: "Text", content: "My text to add to the notes"}]
}
}
this.$store.dispatch('object/update', {id, info: newInfo});

I will be adding more documentation to cover the full range of Store Properties, Actions and Getters.

Active Project

You can access the store for the current active Project.

There aren't any actions available just yet though :(

Active Chart

You can access the store for the current active Chart.

There aren't any actions available just yet though :(

Chart Objects

You can access the Objects in the current active Chart.

update

create

select