我最近遇到了一个有趣的讨论，关于全栈无线电-
使用状态机构建更好的UI组件 。 关键是状态机的概念可以帮助Vue组件的开发。 我开始研究现成的解决方案，但是它们并不是那么简单，我想做一个更简单的实现，在本文中我将要讨论。 本文不仅对使用Vue的人有用，而且对Angular，React等的用户以及其他“教派”的程序员也可能有用。
讨论涉及到与编写组件的每个人都接近的主题。 想像 您正在编写一个请求数据的组件，并且在查询运行时需要显示微调器。 通常，在这种情况下，您将创建一个布尔变量isLoading。 最初，isLoading = false，在请求数据之前，将isLoading变量设置为true。 数据到达后，再次将其设置为false。 微调框的可见性与isLoading相关。
这种方法效果很好。 但是组件很少那么简单。 并且在工作过程中，仍然有必要创建存储不同状态的逻辑变量。 问题是，如果您有一个状态变量，它将生成两个状态，并且两个逻辑变量已经具有四个状态，三个-八个，等等。 问题是，程序员可能会犯一个错误，而不处理系统可能进入的任何状态。 这会导致错误。 另外，很难理解这样的组件，并且有必要创造条件。
答案是一个状态机。 原理很简单-您描述了系统可能处于的状态以及状态之间的转换。 拥有这样的机器可以避免很多错误，并且可以声明方式确定系统的状态。
关于此主题的文章很多（例如
Vue中的有限状态机 ，但经过简要的理论后，大多数文章建议连接其中一个现成的库，例如
davidkpiano / xstate） 。
我以为xstate太麻烦了，想尝试一下我的自行车。 此外，这是为我制定新模式的重要原因。
这是在
Vue版本2的状态机上播放的代码。 这是原始版本，使用的方法略有不同-
使用Vue的State Machine，版本1 。
我从《
状态机 》一文开始。
所以状态机：
class StateMachine { constructor (initialState, transitions) { this.state = initialState this.transitions = transitions } transition (nextState, method, params) { const transitionsArray = this.transitions[this.state] if(transitionsArray.indexOf(nextState) === -1) return this.state if(method) method(...params) this.state = nextState return this.state } }
像这样初始化它：
const machine = new StateMachine('idle', { idle: ['waitingConfirmation'], waitingConfirmation: ['idle','waitingData'], waitingData: ['dataReady', 'dataProblem'], dataReady: ['waitingConfirmation'], dataProblem: ['waitingConfirmation'] })
在组件方法中，创建一个转换函数：
transition(nextState, method = null, params = []) { this.machineState = machine.transition(nextState, method, params) }
在事件中，我们立即写下我们要去的地方：
@click=“transition('waitingConfirmation')"
如果需要同时调用component方法，请编写以下代码：
@click="transition('waitingData', getData, [222])”
第二个参数是必须在此转换中调用的component方法。
第三个参数是此方法的变量数组。
在方法内部，调用为：
this.transition('dataReady')
我故意没有用v-if隐藏按钮，只是现在将其字体颜色设置为灰色。 但是很显然，如果计算机不允许，则单击它们将不起作用。
通常，一切正常，解决方案非常简单。 最重要的是，我们设法以声明方式描述了该组件的操作。 我本人几乎准备将这种方法应用于实际应用中，但是我想了解这种方法的优缺点，并听取更多有经验的专家的建议。