您好,欢迎来到二三娱乐。
搜索
您的当前位置:首页vue/vuex扫雷

vue/vuex扫雷

来源:二三娱乐

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

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

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

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

screenshot.png

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

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

Copyright © 2019- yule263.com 版权所有 湘ICP备2023023988号-1

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务