从状态机和 Xstate 开始！
由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！
作为软件开发人员，我们肯定都听说过状态机。有限状态机在算法设计中非常常见，例如根据一系列输入计算输出，或者根据当前状态和前一个状态的输出计算下一个状态。
状态机有很多常见的例子，你一定听说过。
- 交通信号灯🚦
- 自动售货机⚒️
- 电梯🚪
由于状态机是一种非常紧凑的方式来表示一组复杂的规则和条件，所以让我们来看看如何扩展它在前端应用程序中的使用。
为什么前端需要状态机？
浏览器中的状态管理一直是一个棘手的问题，尤其是在开发具有复杂状态管理的大型应用程序时。UI框架扮演着至关重要的角色，它负责接收应用程序状态并将其传递给DOM节点，以实现预期的结果。
状态机是一种非常有效的应用程序状态建模方法，它能确保应用程序在任何给定时间点都只能处于一种状态。所有这些优势都有助于我们解决应用程序扩展性方面的问题，因为扩展性最终需要处理新的事件、新的边界情况等等。
从我们的应用程序开始。
让我们首先使用Xstate在Vue.js中创建一个简单的待办事项应用程序。
第一步是确定创建待办事项列表所需的所有可能的用户界面状态。我开始记录应用程序所需的基本状态和操作。
-
会有一些基本状态，例如空闲、加载中、已解决、已拒绝。
-
应用程序中需要执行的操作包括：更新列表、创建新的待办事项、更新待办事项和删除待办事项。
-
编辑、删除和创建将处于并行状态，用户可以同时执行这三个操作。
根据以上提示，我在Xstate Viz上创建了一个基本状态图，涵盖了我的应用程序的所有状态和操作。
状态机定义代码：
Machine(
{
id: 'Todo',
initial: 'idle',
context: {
user: null,
todoList: [],
delay: 0
},
states: {
idle: {
on: {
fetch: 'list'
}
},
list: {
invoke: {
id: 'fetchList',
src: (context, event) => {
return context.todoList
},
onDone: {
target: 'resolved'
},
onError: 'rejected'
},
on: {
listItems: {
target: 'todoItemActions',
actions: 'addListItem'
// actions: ['fetchListItems']
}
}
},
resolved: {
type: 'final'
},
rejected: {
on: {
fetch: 'list'
}
},
todoItemActions: {
type: 'parallel',
states: {
createTodoItem: {
initial: 'add_details',
states: {
idle: {
on: {
create: 'add_details'
}
},
add_details: {
on: {
fillDetails: {
target: 'createSuccess',
actions: 'createNewTodoItem'
}
}
},
createSuccess: {}
}
},
deleteTodoItem: {
initial: 'idle',
states: {
idle: {
on: {
select_item: 'deleteItem'
}
},
deleteItem: {
on: {
delete: {
target: 'deleteSuccess',
actions: 'deleteTodoItem'
}
}
},
deleteSuccess: {}
}
},
editTodoItem: {
initial: 'idle',
states: {
idle: {
on: {
edit: 'edit_details'
}
},
edit_details: {
on: {
fill_details: {
target: 'editSuccess',
actions: 'editTodoItem'
}
}
},
editSuccess: {}
}
}
}
}
}
},
{
actions: {
createNewTodoItem: (context, event) => {
console.log('create new todo item', context)
},
addListItem: (context, event) => {
console.log('add list item', context, event)
},
deleteTodoItem: (context, event) => {
console.log("delete todo item", context, event)
},
editTodoItem: (context, event) => {
console.log("edit todo item", context, event)
}
}
}
)
您可以在可视化工具中查看上述状态机定义。
下一篇文章，我将介绍如何使用 Vue js 中的 Xstate 集成和创建待办事项应用程序。
我从网上几篇很棒的文章中获得了灵感，一定要去看看！🙈
文章来源：https://dev.to/jasmin/starting-with-state-machine-and-xstate-1972