基于Vuex的ToneJS应用中的体系结构问题

Question

我正在使用Tone.js库在Vue+Vuex中构建一个(音乐)排序器，并遇到了以下问题：

顺序器的单个音乐曲目是动态创建的，所以我在state上存储对象，包括对它们的合成器的引用(即：new Tone.Synth()) .当播放这些合成器时(我的调用，来自App.vue：this.synths[index].triggerAttackRelease(pitch, '8n', time)，它们启动但不停止，取决于速度，它会溢出堆栈。基本上，似乎Tone.js试图直接突变state，这会造成混乱……ie:严格模式触发一个警告: vue.esm.js?efeb:591 Vue警告：在回调中为观察者“函数() {返回this._data.$$state }"：”错误：vuex不会在变异处理程序之外变异vuex存储状态。“

我很有信心在这里正确地诊断出了问题，但是解决方案似乎有点迂回:在我的App.vue状态下创建一个数组来容纳合成器，然后与Vuex状态的跟踪信息并行更新它。在这里，我认为特别有问题的是，我有保存/加载函数(使用LocalStorage)，它本质上复制/重新填充Vuex状态；在这些函数中，我必须添加一个函数，它还可以在主应用程序上更新这些合成器。可行，但感觉是间接的和奇怪的。

我特别想知道:有没有更好的方法？什么样的方法最适合这种情况？我需要了解哪些概念或原则才能在这里编写好的代码？当然，如果你认为我没有正确诊断出这个问题，请告诉我。

最后-我应该澄清我是一个爱好者，而不是一个专业人士，而且由于时间的限制，我现在真的很喜欢Vue/Vuex。

Answer 1

这可能没有多大帮助，因为答案在React + Redux中，但它似乎是构建应用程序的好方法，因此您也许可以获得抽象的想法并将其用于您的优势。http://joesul.li/van/react-and-web-audio/

如果您将合成器视为一种不会改变状态的东西，而是只在状态下响应更新。我不知道Vue，但我认为您可以“侦听”组件的beforeUpdate函数中的更改，对吗？https://alligator.io/vuejs/component-lifecycle/ -那么您的所有程序都会在那里发生变化吗？

我不知道这是否有帮助，但本文所描述的processEvent的实现如下：https://github.com/glenpike/microsynth/blob/master/src/components/WebAudioSynth/WebAudioSynth.js#L187

我的系统使用Redux，它使用容器将状态变化( Redux )映射为“props”。事件由我的componentWillUpdate函数传入，它可能类似于Vue中的beforeUpdate函数

希望这不会让人困惑。我也有类似的错误，抱怨在Redux的“流程”内发生的事情，这听起来就像Vuex发生的事情，因为它们都是“Flux”实现--当我把我的东西放在正确的生命周期函数中时，这些功能似乎是有效的。

Answer 2

这听起来像是您要求Vue将这些Tone synth对象转换为反应性对象，这意味着它会深入到它们中，并将每个属性封装到一个getter和setter中，这样它就可以跟踪任何突变。当您在synth上调用一个方法时，它会修改它自己的属性，在Vuex数据存储中创建一个完整的不必要的突变链。

一个简单的解决方案是将这些Tone对象排除在Vuex数据存储区之外。您可以导入它们，实例化它们，并从组件中调用它们的方法，甚至将它们绑定到组件，但只需确保它们不是被动的(例如，可以在created生命周期挂钩中将它们实例化/绑定到组件，但确保不将它们的名称作为属性名包含在data对象中)。

例如，假设您需要一些范围输入来控制Tone合成器的参数。您可以将这些输入v-bind给组件中的计算设置器，以自动更新Vuex Store，还可以查看这些相同的属性来执行Tone对象更新。

这里更重要的一点是，除非您有足够的理由，否则您可能不应该跟踪您没有编写的代码，因为谁知道它会产生多少额外的工作。此外，在这种情况下，Tone对象是您的反应性系统的边界，因为应用程序代码中的任何内容都不依赖于它们。他们的工作是与浏览器内部和周围的操作系统进行通信，以产生声音。