vue/vuex扫雷

之前项目中使用到Vue这个框架，总体来说开发体验非常好，组件化和数据绑定极大地提高了开发效率，也提高了代码的可维护性。不过之前使用的还是直接引入框架，使用字符串模板作为组件模板的方式开发，这样的方式比较简单易行，直接引入vue,min,js即可开发。不过这种方式虽然简单，但也有显而易见的缺点

使用vue的单文件组件，配合webpack就能很好得解决以上这些问题。

同时在使用vue的过程中，我也遇到了组件之间需要共享数据的问题，以及跨组件交流的问题。虽然这些问题在复杂程度不高的场景下问题不是特别大，但是在构建大型单页应用的时候问题就会很明显。Vuex使用单向数据流的模型比较好的解决了共享数据和跨组件交流问题，同时也让数据流动得以有效的监控。在vuex的官网介绍中也说到

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是，如果您需要构建是一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择

为了体验一下单文件组件和vuex单向数据流，我做了一个简单的扫雷程序，点击Demo直接试玩！

实现原理也比较简单，用二维数组保存棋盘，Vuex集中管理游戏过程中的所有数据和状态，游戏状态、棋盘状态等，所有的数据修改都集中在Vuex的mutation里。整体的结构也不复杂，组件构成如下图，都能在Components目录下找到对应的组件。

screenshot.png

对于扫雷棋盘的自动扩展和我这里用的是比较直观的递归的方法：

• 对于棋盘上的一块，遍历它周围最多8个块（边界块周围没有8个块），计算出雷的个数
• 如果个数为零，则遍历周围未点击的块，递归调用自身，计算雷的个数
• 如果个数不为零，停止递归
  可以看到，递归的过程中做了重复计算，所以肯定也能使用动态规划的方式保留中间状态，对搜索剪枝。不过这里先简单实现了~