Store

Use the store to access and manage the Panel's state and trigger actions.

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