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

And show that this is needed if the vuex store is in strict mode.

Author: BacLuc

src/HalJsonVuexPlugin.ts

@@ -407,7 +407,10 @@ export function HalJsonVuexPlugin<RootEndpoint extends ResourceInterface, FullSt
   function setLoadPromiseOnStore<StoreType> (uri: string, loadStoreData: Promise<StoreData<StoreType>> | null = null) {
     const promise: SerializablePromise<StoreData<StoreType>> = 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

@@ -2,7 +2,7 @@ import { del, set } from 'vue-demi'
 
 import type { MutationTree } from 'vuex/types'
 
-import type StoreData from './interfaces/StoreData'
+import type { StoreData, SerializablePromise } from './interfaces/StoreData'
 
 export const state = {}
 export type State<StoreType> = Record<string, StoreData<StoreType>>
@@ -30,6 +30,14 @@ export const mutations: MutationTree<State<unknown>> = {
       set(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<StoreType> (state: State<StoreType>, 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

tests/apiOperations.spec.js

@@ -22,15 +22,22 @@ let axiosMock
 let store
 let vm
 
-describe('Using dollar methods', () => {
+describe.each(
+  [
+    false,
+    true
+  ]
+)('Using dollar methods and store.strict: %s', (strict) => {
   beforeAll(() => {
     axios.defaults.baseURL = 'http://localhost'
   })
 
   beforeEach(() => {
     axiosMock = new MockAdapter(axios)
 
-    store = createStore({})
+    store = createStore({
+      strict
+    })
 
     const installApi = {
       install (app) {