脚本宝典收集整理的这篇文章主要介绍了vuejs - 检视vuex的时间旅行能力，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

现在来看下闻名已久的vuex时间旅行能力：

1. 通过vuex的执行的操作会被记录下来

2. 可以选择操作记录，返回回退到此操作时的状态

因为vuex，状态的时间旅行称为可能。举例说，比如我的一个状态值为0，做了四次加1，如果我选择回退到第二次操作，那么状态值会恢复到2。

这次使用的代码来自于： https://segmentfault.com/a/11... 。文件名为vuex.htML,现在可以使用一个简单的web服务把此页面共享出去。

VAR http = require('http');
var fs = require('fs');
var file = 'vuex.html'
var index = fs.reaDFileSync(file);

http.createServer(function (req, res) {
  res.wrITeHead(200, {'Content-tyPE': 'text/html'});
  res.end(index);
}).listen(8080);

你需要首先安装vue-devtools，然后访问localhost:8080，可以看到vue-devtools的V型图标从默认的灰色变成彩色，点击此图标，会提示：

Vue.js is detected on this page. Open Chrome Devtools and look for the Vue panel.

按此提示，打开Chrome Devtools，查看Vue面板，可以在右上方看到Vuex。点击它就可以开始状态的时间旅行了。

1. 点击按钮+四次，可以看到左边的列表（状态列表）变成5条，从Base State到4个inc。界面数字变成4

2. 点击第二个inc，就可以看到状态列表内变成3条，从Base State到2个inc。

3. 而界面上的数字变成2

4. 多点几次可以看到状态值counter确实是可以在多个操作中拣选的

注意：这次我们使用了一个简单的node服务器来伺服vuex.html，而不是直接通过file://协议打开文件。后者确实可以使用，但是vue-devtools并不能检测到此demo采用了vue。如果想要它可以检测的话，必须在chrome插件页针对vue-devtools打开选项运行访问文件网址。
作者：刘传君

做过产品，创过业。好读书，求甚解。
可以通过 1000copy#gmail@R_126_1718@ 联系到我

出品

bootstrap小书 https://www.gitbook.com/book/...
http小书 http://www.ituring.com.cn/boo...
Git小书 http://www.ituring.com.cn/boo...

脚本宝典总结

以上是脚本宝典为你收集整理的vuejs - 检视vuex的时间旅行能力全部内容，希望文章能够帮你解决vuejs - 检视vuex的时间旅行能力所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。