和2018年年初做管理系统的不同（vuex）

从2017年底开始做公司批改后台系统（服务内部人员对熊猫小课用户的作业进行批改、对批改员工资结算等）到教务系统（服务于内部人员对熊猫小课等移动端产品的内容进行配置等）、ai-boss系统（服务于内部人员更高效的对python系产品的用户进行服务）、最后到现在的契约运营管理系统。

前两个pc端系统，我们完全没有引入vuex，ai-boss里面因为涉及到聊天，聊天左边是用户列表，有群聊和单聊，右边是聊天窗口。组件嵌套已经达到至少3层，父子关系的组件要对同一个变量进行操作，子组件通过props来接受父组件传递的数据，然后子组件对数据进行修改通过emit触发事件将修改的数据传递给父组件，已经使得数据改变很难追踪。我们必须得引入vuex来解决多个组件操作同一个变量，变量数据变化难以追逐变化来源的问题。

现在做的契约运营管理系统这个新项目我一个人从头部布局开始写，页面很简单，开始写之前我还是思考了一下要不要引入vuex。引入vuex需要一些理由：

1、组件嵌套深，嵌套层级在2层及以上，并且最外层到最底层的组件需要对同一个变量进行操作就可以考虑；

2、非父子关系的组件对同一个变量要进行操作，考虑。

契约管理系统的页面涉及到两个页面切换，且这两个页面组件都一样，只是数据不同。页面中上面是选择框，下面是根据选择框的选择请求的数据。这就已经涉及到非父子组件之间需要对同一变量进行操作的问题。首次进入页面选择框还有一个后端返回的默认选项，父子组件也需要对同一个变量进行操作。将所有组件之间要共同操作的变量都用vuex来管理，我们在需要使用vuex管理的变量的页面去引入相关变量，然后就可以直接操作，不用再担心会有因为变量是在组件中的props中定义的，所以组件不能修改变量，只能通过在父组件写事件，子组件通过emit触发事件来将修改的数据传给父组件的情况。

我已经受够了在子组件中用props来定义变量接受父组件的传来的数据，我只希望我封装了很多通用的组件，然后可以像只写了一个页面一样，可以任意修改定义的变量然后渲染。

用vuex管理变量时只能通过提交mutation来改变store中定义的变量的状态，我们需要为每一个在store中定义的变量，在mutation中写一个对应的修改变量的方法。在需要使用的页面中引入变量和修改变量的方法。也就是我们会花上一些时间去写些重复性的用来定义变量和修改变量的方法的代码，这让使用vuex的人感觉也不是太好，但是如果定义好这些共享变量之后，不管组件在哪里，修改这些变量就会容易很多，就像在一个页面书写逻辑一样，什么都不用考虑了，开发者只需要去关注书写逻辑。

使用vuex之后，我也不用像以前那样害怕需求的变更。比如需要给选择器加一个缓存内容选项的功能，两个切换的页面是通过父级页面的route-view来渲染的，那么这个读取缓存的数据的逻辑是写在封装了选择器的组件中的mouted中还是写在包含这个组件的页面中？因为使用vuex管理的变量，变量在哪里都可以轻易读取和修改，所以具备很大灵活性，在哪里都可以去读缓存数据，主要是要满足业务场景。这里当然是写在包含了组件的页面中是最好的，进入页面的时候如果有缓存就不请求获取默认选择器的值的接口，否则才请求。

采用了更好的适合业务场景的技术，让代码更适应不同需求，代码具有了更好的扩展性，出错率也低了很多。

更重要的，需要不断主动去挖掘更好的适合业务场景的技术，不断去优化改进实现的方案，效率才能不断提高。

vuex早就应该在项目中大量使用了，要做专业的程序员不应该对技术怠慢。