[发明专利]一种基于Vuex技术的代码管理方法

说明书

本发明特别涉及一种基于Vuex技术的代码管理方法。该基于Vuex技术的代码管理方法，先创建一个Vue工程，并在项目中引用Vuex功能；然后在代码结构的src目录下创建Vuex文件夹，用于Vuex功能管理；在代码结构的src目录下创建page文件夹，用于进行功能页开发；为各个功能创建文件夹，按规则对前端代码进行分类管理；根据Vuex的使用规则，利用每个vue文件对js文件中的函数进行调用。该基于Vuex技术的代码管理方法，不仅能够在Vue开发过程中实现样式布局scss，结构view和实现逻辑功能的action的分离，进行逻辑清晰的代码分类管理，实现方便而准确查找功能，还能避免代码冗余，降低了后期维护成本，适于推广应用。

技术领域

本发明涉及前端开发技术领域，特别涉及一种基于Vuex技术的代码管理方法。

背景技术

随着编程技术发展，越来越研发人员开始在工作过程中采用已有的比较成熟的软件框架来进行开发，而Vue作为一个现在被广泛采用、方便灵活的前端框架在市场上被大量使用。

在使用的过程中，有其框架的方便性，但是还有其他问题需要继续解决或者优化，例如在研发过程中，因为每个人的个人习惯不同，导致在大型或者需要联合开发的项目中，代码管理容易混乱，不够清晰，重复性多等问题。

Vuex是一个专为Vue应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。因此，可以基于Vue来重新定义一种代码管理方式以避免研发过程出现的一些问题。

为了解决在复杂项目中采用Vue框架的开发的时候，引发的代码混乱和重复使用，状态管理等问题，本发明提出了一种基于Vuex技术的代码管理方法。

发明内容

本发明为了弥补现有技术的缺陷，提供了一种简单高效的基于Vuex技术的代码管理方法。

本发明是通过如下技术方案实现的：

一种基于Vuex技术的代码管理方法，其特征在于：包括以下步骤：

S1.创建一个Vue工程，并在项目中引用Vuex功能；

S2.在代码结构的src目录(源代码目录)下创建Vuex文件夹，用于Vuex功能管理；

S3.在代码结构的src目录下创建page文件夹，用于进行功能页开发；

S4.为各个功能创建文件夹，按规则对前端代码进行分类管理；

S5.根据Vuex的使用规则，利用每个vue文件对js文件中的函数进行调用。

所述步骤S2中，在Vuex文件夹中创建store.js(数据存储插件)文件，用于整合后期所有创建的Vuex文件。

若需要用到公共数据和函数，则在Vuex文件夹中创建index.js(索引)文件，将所有的公共函数和变量全部定义在index.js文件中，方便后期具体功能页的调用。

所述步骤S2中，根据Vuex文档，在Vue初始化启动的时候把store(储存)仓库的实例注入所有的子组件。

所述步骤S4中，每个功能分别创建一个独立的文件夹，并按功能名称来对文件夹进行名命，方便查找和管理。

在每个功能对应的文件夹下面创建功能模块的三个文件，分别为.vue文件，.js文件和.scss文件，在.vue文件中对.js文件和.scss文件进行调用。

将功能函数和变量全部定义到.js文件中，并在.js文件中暴露出action(行动)，getters，state(状态)和mutations(变数集合)。

在store.js文件中对当前功能.js文件进行注册，.js文件就能在Vue中进行调用。