Sto utilizzando la libreria Tone.js per creare un sequencer (musicale) in Vue + Vuex e ho riscontrato questo problema :
Le singole tracce musicali del sequencer vengono create dinamicamente, quindi sto memorizzando oggetti per loro su state , incluso un riferimento ai loro sintetizzatori (es: new Tone.Synth() ) ... quando questi synth vengono riprodotti (my call, da App.vue : this.synths[index].triggerAttackRelease(pitch, '8n', time) , si avviano ma non si fermano e, a seconda del tempo, possono sovraccaricare lo stack. Fondamentalmente, sembra che Tone.js stia tentando di mutare direttamente il state , che causa mayhem ... vale a dire: la modalità strict attiva un avviso: vue.esm.js? efeb: 591 [Vue warn]: errore nel callback per watcher "function () {return this._data. $$ state}": "Errore: [vuex] Non muta lo stato dell'archivio di vuex al di fuori dei gestori di mutazione."
Sono abbastanza sicuro di aver diagnosticato correttamente il problema qui, ma la soluzione sembra un po 'tortuosa: creare un array nel mio stato App.vue per ospitare i synth e quindi aggiornarlo in parallelo con le informazioni sulla traccia su lo stato di Vuex. La cosa che mi sembra particolarmente problematica è che ho Salva / carica (usando LocalStorage) che essenzialmente copia / ripropone lo stato di Vuex; a questi dovrei aggiungere una funzione che aggiorna anche questi synth sull'app principale. Doable , ma sembra indiretto e strano.
In particolare mi chiedo : c'è un modo migliore? Che tipo di approcci sono i migliori per questo tipo di situazione? Quali concetti o principi potrei aver bisogno di sapere per scrivere un buon codice qui? E, naturalmente, se pensi di non aver correttamente diagnosticato il problema, ti prego di farmelo sapere anche io.
Infine, dovrei chiarire che sono un hobbista, non un professionista, e per via dei limiti di tempo sono davvero abbastanza legato a Vue / Vuex per il momento.
Grazie per l'aiuto che puoi offrire!