基于 Vue+Mint-ui 的 Mobile-h5 的项目说明 (3)

image

6. 项目用vuex 的讲解

本项目vuex的用法 和官方的有点不一样,所以这里有必要做一下讲解。

1. 保存值 mutations

-1. 要用store来存储值,都要先定义

比如:新增里面要存储关于 日 月 类型的切换:tabActiveType: '',
要先在store模块的add里面的initPageState 先定义,不然找不到,为取值会为undefined。

add模块的 initPageState.png

定义type,至于为什么要大写?因为当作常量来用,当然不大写也可以,不过本项目要统一成大写。

type.png

mutatuons 写一个方法来保存值

mutatuons.png

调用保存值,这里的 SAVE_TAB_ACTIVE_TYPE 要与定义在第2中 type 里面的对应,而且 对象里的 key 要与initPageState里面定义的对应,如 tabActiveType。

调用保存值.png

当然怎么取值?只需要在组件的computed勾子像下面这样子写即可。

image.png

按照这5步,一个关于vuex的取值与偘保存值就ok了!

2.那怎么异步action呢?

定义type,和上面的第二步一样

在相应模块的 actions 里定义一个方法,如下图:

actions.png

这样子可以获取异步请求数据,并保存在store里面了。

当然调用?只需要在组件的方法或者勾子里面,像下面这样子调用即可。

调用.png

四、开发规范 1.代码规范

结合团队日常业务需求以及团队在日常开发过程中总结提炼出的经验而制定。

旨在增强团队开发协作、提高代码质量和打造开发基石的编码规范,

以下规范是团队基本约定的内容,必须严格遵循。

规范链接: 

参考 腾讯和京东的前端代码规范 

腾讯的 

京东的 https://guide.aotu.io/index.html

2. 统一编辑器--vsCode 全称 Visual Studio Code

Visual Studio Code 是微软推出的跨平台编辑器。它采用经典的VS的UI布局,功能强大,扩展性很强。

这个编辑器流畅简洁,自从用了这个编辑器,其他的都不想了,只想静静地敲代码了。

Microsoft Visual Studio Code 中文手册  https://jeasonstudio.gitbooks.io/vscode-cn-doc/content/

统一格式化代码插件-- Vetur  一个关于vue代码格式化 

image

vue代码统一格式化可以减少代码风格差异

而且这个插件配置一下更好用:
"vetur.format.defaultFormatter.js": "vscode-typescript",

image

不然有些地方会出现换行,代码难懂了。像下面这样:

image

3. 推荐皮肤插件--Boxxy Theme Kit 

其中的代码颜色:Boxy Ocean 是很好看的代码风格
用上之后不满意 ?哼,那笔者就不高兴了,笔者不负责!

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpzfxs.html