Store

We use Vuex to ensure a consistent state of data throughout the Panel. If you have not worked with Vuex before, you should first familiarize yourself with their documentation.

How to access `$store`?

The Panel exposes all the store and all its modules via this.$store:

// example in the Vue component of a custom field

panel.plugin("your/display-other-field", {
  fields: {
    "other-display": {
      // …
      computed: {
        otherValue() {
          return this.$store.getters["content/values"]()["other-field"];
        }
      }
      // …
    }
  }
});

Main store

State

this.$store.state

Key	Description
`isLoading`	Whether the Panel is currently loading something, e.g. via API

// example of store state
{
  isLoading: false
}

Actions

`isLoading`

Sets the Panel state to loading, e.g. starts the loading spinner in the Panel's topbar.

this.$store.dispatch("isLoading", true);
this.$store.dispatch("isLoading", false);

`notification` module

Centrally handles all notifications shown, which can be dispatched from any part of the Panel

State

this.$store.state.notification

Key	Description
`type`	Type of the current notification (error, success)
`message`	The notification message shown in the topbar
`details`	Additional attributes for the notification. Not used yet
`timeout`	Time in milliseconds until the notification gets hidden again

// example of store state
{
  type: "error",
  message: "The page could not be deleted",
  details: null,
  timeout: 4000
}

Actions

`notification/open`

Opens a new notification

this.$store.dispatch("notification/open", {
  type: "success",
  message: "Yay, it worked",
  timeout: 5000
});

`notification/success`

Triggers a success notification

this.$store.dispatch("notification/success", "Yay, it worked");

`notification/error`

Triggers an error notification

this.$store.dispatch("notification/error", "Nooooooo!");

`notification/close`

Closes the current notification

this.$store.dispatch("notification/close")

`content` module

Holds the content values of the currently viewed model (e.g. page, file, user) as well as all unsaved changes.

We are planning to refactor this in a future release, e.g. moving unsaved changes from the store (saved in localStorage) to the PHP backend (stored on the server). We will always inform you in detail of any breaking changes. Nevertheless, use with caution.

State

this.$store.state.content.current

Key	Description
`current`	ID of the current model (with translation suffix)
`models`	Array of already loaded models
`status`	Object with `enabled` (bool)

// example of store state
{
  current: "pages/notes+a-great-post/?language=en",
  models: {
    "pages/notes+a-great-post/?language=en": {
      api: "…",
      originals: {
        categories: "long read, weekend, travel"
      },
      changes: {
        categories: "long read, weekend, at home"
      }
    },
    "users/hjk343n": {
      api: "…",
      originals: {
        name: "Homer Simpson"
      },
      changes: {}
    }
  },
  status: {
    enabled: false
  }
}

Getters

this.$store.getters["content/values"](id)

Key	Parameters	Description
`exists`	`id`	Checks if a model exists in the store
`hasChanges`	`id` (optional)	Checks if a model has unsaved changes
`id`	`id`	Returns ID (current or provided) with correct language suffix
`isCurrent`	`id`	Checks if specified ID is the current model
`model`	`id` (optional)	Returns the full model object
`originals`	`id` (optional)	Returns all original values (as in content file) for a model
`changes`	`id` (optional)	Returns all unsaved changes for a model
`values`	`id` (optional)	Returns all values for a model (originals updated with unsaved changes)

Actions

this.$store.dispatch("content/update", ["myField", "newValue"])

Key	Parameters	Description
`clear`		Removes all unsaved changes
`create`	`model`	Create a store entry for a model
`current`	`id`	Set the current model
`disable`		Disable content forms
`enable`		Enable content forms
`move`	`[oldId, newId]`	Move a store entry for a model
`remove`	`id`	Remove a model from store
`revert`	`id` (optional)	Discard unsaved changes for a model
`save`	`id` (optional)	Update content file for a model
`update`	`[field, value, id]` (id optional)	Update a field value for a model