状态记录工具
Slim提供了状态更新记录工具,主要功能如下
- 更方便的查看状态的的改变和对应的Action
- 快速的切换到某一时刻的状态
- 下载某一时刻的状态值
安装和使用
- 开启开发模式(开发环境默认开启)
- 在Chrome Store中下载slim插件
- 打开控制台切换到slim tab页,在有Slim运行的开发环境下,Devtool将会自动记录您的状态变化。
提示
Devtool集成在Slim中,如需配合Vue或者React等框架中使用还需要进行特殊处理,下面是一个集成在vue中的展示例子
集成方式
在Slim中会暴露出一个内置事件__SLIM_DEVTOOL_ANSWER__
,在点击Revert
时触发,接收对应时刻的State
我们推荐使用插件的形式进行集成,在Plugin的init hook
中监听__SLIM_DEVTOOL_ANSWER__
,然后触发Reducer:__SLIM_DEVTOOL_SET__
更新State
import Slim from 'slim-store'
let devPlugin = {
init(store) {
Slim.on('__SLIM_DEVTOOL_ANSWER__', (state) => {
store.commit('__SLIM_DEVTOOL_SET__', state)
})
}
}
Slim.use(devPlugin)