fix: compatibility with vuex4: no changing of store data outside of mutations

src/index.ts

@@ -228,7 +228,7 @@ function HalJsonVuex (store: Store<Record<string, State>>, axios: AxiosInstance,
    * @param templateParams in case the relation is a templated link, the template parameters that should be filled in
    * @returns Promise      resolves to the URI of the related entity.
    */
-  async function href (uriOrEntity: string | ResourceInterface, relation: string, templateParams:Record<string, string | number | boolean> = {}): Promise<string | undefined> {
+  async function href (uriOrEntity: string | ResourceInterface, relation: string, templateParams: Record<string, string | number | boolean> = {}): Promise<string | undefined> {
     const selfUri = normalizeEntityUri(await get(uriOrEntity)._meta.load, axios.defaults.baseURL)
     const rel = selfUri != null ? store.state[opts.apiName][selfUri][relation] : null
     if (!rel || !rel.href) return undefined
@@ -245,7 +245,7 @@ function HalJsonVuex (store: Store<Record<string, State>>, axios: AxiosInstance,
    * @returns Promise   resolves when the PATCH request has completed and the updated entity is available
    *                    in the Vuex store.
    */
-  function patch (uriOrEntity: string | ResourceInterface, data: unknown) : Promise<ResourceInterface> {
+  function patch (uriOrEntity: string | ResourceInterface, data: unknown): Promise<ResourceInterface> {
     const uri = normalizeEntityUri(uriOrEntity, axios.defaults.baseURL)
     if (uri === null) {
       return Promise.reject(new Error(`Could not perform PATCH, "${uriOrEntity}" is not an entity or URI`))
@@ -347,7 +347,7 @@ function HalJsonVuex (store: Store<Record<string, State>>, axios: AxiosInstance,
     return objectKeys.length === 1 && objectKeys[0] === 'href' && (value as Link).href === uri
   }
 
-  function findEntitiesReferencing (uri: string) : Array<StoreData> {
+  function findEntitiesReferencing (uri: string): Array<StoreData> {
     return Object.values(store.state[opts.apiName])
       .filter((entity) => {
         return Object.values(entity).some(propertyValue =>
@@ -406,7 +406,11 @@ function HalJsonVuex (store: Store<Record<string, State>>, axios: AxiosInstance,
   function setLoadPromiseOnStore (uri: string, loadStoreData: Promise<StoreData> | null = null) {
     const promise: SerializablePromise<StoreData> = loadStoreData || Promise.resolve(store.state[opts.apiName][uri])
     promise.toJSON = () => '{}' // avoid warning in Nuxt when serializing the complete Vuex store ("Cannot stringify arbitrary non-POJOs Promise")
-    store.state[opts.apiName][uri]._meta.load = promise
+
+    store.commit('setLoadPromise', {
+      uri,
+      promise
+    })
   }
 
   /**

src/storeModule.ts

@@ -1,4 +1,4 @@
-import StoreData from './interfaces/StoreData'
+import StoreData, { SerializablePromise } from './interfaces/StoreData'
 
 import { MutationTree } from 'vuex/types'
 
@@ -12,7 +12,7 @@ export const mutations: MutationTree<State> = {
    * @param state Vuex state
    * @param uri   URI of the object that is being fetched
    */
-  addEmpty (state: State, uri: string) : void {
+  addEmpty (state: State, uri: string): void {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     state[uri] = { _meta: { self: uri, loading: true } }
@@ -22,7 +22,7 @@ export const mutations: MutationTree<State> = {
    * @param state Vuex state
    * @param data  An object mapping URIs to entities that should be merged into the Vuex state.
    */
-  add (state: State, data: Record<string, unknown>) : void {
+  add (state: State, data: Record<string, unknown>): void {
     Object.keys(data).forEach(uri => {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
@@ -32,36 +32,44 @@ export const mutations: MutationTree<State> = {
       state[uri]._meta.reloading = false
     })
   },
+  /**
+   * Adds entities loaded from the API to the Vuex store.
+   * @param state Vuex state
+   * @param data  An object mapping URIs to entities that should be merged into the Vuex state.
+   */
+  setLoadPromise (state: State, data: { uri: string, promise: SerializablePromise<StoreData> }): void {
+    state[data.uri]._meta.load = data.promise
+  },
   /**
    * Marks a single entity in the Vuex store as reloading, meaning a reloading network request is currently ongoin.
    * @param state Vuex state
    * @param uri   URI of the entity that is currently being reloaded
    */
-  reloading (state: State, uri: string) : void {
+  reloading (state: State, uri: string): void {
     if (state[uri]) state[uri]._meta.reloading = true
   },
   /**
    * Marks a single entity in the Vuex store as normal again, after it has been marked as reloading before.
    * @param state Vuex state
    * @param uri   URI of the entity that is currently being reloaded
    */
-  reloadingFailed (state: State, uri: string) : void {
+  reloadingFailed (state: State, uri: string): void {
     if (state[uri]) state[uri]._meta.reloading = false
   },
   /**
    * Removes a single entity from the Vuex store.
    * @param state Vuex state
    * @param uri   URI of the entity to be removed
    */
-  purge (state: State, uri: string) : void {
+  purge (state: State, uri: string): void {
     delete state[uri]
   },
   /**
    * Removes all entities from the Vuex store.
    * @param state Vuex state
    * @param uri   URI of the entity to be removed
    */
-  purgeAll (state: State) : void {
+  purgeAll (state: State): void {
     Object.keys(state).forEach(uri => {
       delete state[uri]
     })
@@ -71,15 +79,15 @@ export const mutations: MutationTree<State> = {
    * @param state Vuex state
    * @param uri   URI of the entity that is currently being deleted
    */
-  deleting (state: State, uri: string) : void {
+  deleting (state: State, uri: string): void {
     if (state[uri]) state[uri]._meta.deleting = true
   },
   /**
    * Marks a single entity in the Vuex store as normal again, after it has been marked as deleting before.
    * @param state Vuex state
    * @param uri   URI of the entity that failed to be deleted
    */
-  deletingFailed (state: State, uri: string) : void {
+  deletingFailed (state: State, uri: string): void {
     if (state[uri]) state[uri]._meta.deleting = false
   }
 }