$store – Reactive Store API

Provides reactive access to any part of the application state and controlled mutation methods via a Redux-based backend.

const { $store } = usePluginApi()

---

🧠 Core Concept

• $store.get(...) is the foundation

• Internally:

  • Subscribes to an observable
  • Wraps the result in a Vue ref

• All getters return live reactive state

👉 This allows you to access any part of the store with automatic updates.

---

🧩 Application State Access

const ui = $store.get(["ui"])
const widgets = $store.get(["widgets"])
const widget = $store.get(["widgets", widgetId])

• pathArray maps directly to the global state tree
• Returns a reactive ref

---

📥 Core Getter

get(pathArray, filter?)

const state = $store.get(["queries", actionId])

• Fully dynamic access to nested state
• Reactive
• Foundation for all other getters

---

📥 Specialized Getters

getWidgetState(widgetId?)

const widgetState = $store.getWidgetState()

Resolves to:

["widgets", widgetId]

---

getUiState()

const uiState = $store.getUiState()

Resolves to:

["ui"]

---

getQueryState(actionId)

const queryState = $store.getQueryState(actionId)

Resolves to:

["queries", actionId]

---

🔎 Query Action IDs

Query/action IDs follow this format:

plugin-<pluginKey>-<entity>-<action>-<uniqueId>

Example:

plugin-pacifico__example-todo-116-todo-getAll-sD9o

These IDs are:

• Generated per query instance
• Used as keys in:

applicationState.queries[actionId]

---

getSiblingWidgetStates()

Returns reactive states of related widgets.

---

hasChanges(stateA, stateB)

const changed = $store.hasChanges(originalState, currentState)

• Requires two arguments

• Returns true if differences are detected

• Useful for:

  • dirty checks
  • save indicators
  • form comparisons

---

⚠️ getQueryData(actionId)

• Not implemented

---

📤 Mutations

All mutations:

• Dispatch Redux actions
• Trigger reactive updates

---

setUiState(payload)

$store.setUiState({ navigationOpen: true })

---

setWidgetState(payload, widgetId?)

$store.setWidgetState({ foo: "bar" })

• Full override

---

updateWidgetState(payload, widgetId?)

$store.updateWidgetState({ count: 1 })

• Merge update

---

updateConfig(payload, widgetId?)

$store.updateConfig({ theme: "dark" })

---

updatePublic(payload, widgetId?)

Updates:

widgets[widgetId].public

---

publishWorkingState(payload, widgetId?)

Updates:

widgets[widgetId].workingState

---

updateDataItem(uuid, payload, override?)

$store.updateDataItem("uuid-123", { name: "Updated" })

Targets:

applicationState.data[uuid]

---

🔁 Reactivity Example

const uiState = $store.getUiState()

$store.setUiState({ navigationOpen: true })

// uiState.value.navigationOpen updates automatically

---

⚖️ Mental Model

Concept	Description
$store.get	reactive selector (core primitive)
Query IDs	unique keys for query instances
Mutations	Redux dispatch → reactive updates
hasChanges	explicit state comparison utility

---

🧠 Key Takeaways

• $store.get() lets you access any nested state reactively
• Query states are indexed by generated action IDs
• hasChanges(a, b) is a manual comparison tool, not reactive
• Mutations propagate automatically to all consumers