关于前端:使用vuex40完成两个组件数据的双向绑定实现modules模块化

问题场景：在优化我的项目的交互体验时，想实现在左侧表单输出数据，右侧筛选条件组件同步显示输出的性能，第一工夫想到应用 vuex

因为 vuex 降级到了 4.0，语法产生了较大的变动，首先查问官网文档

vuex 官网文档

 看到我的项目构造引起了我的留神，思考到前期治理我的项目能更加便当，应用 modules 势在必行

 在 store 目录下新建 modules 文件夹，之后的 module 文件都放在这个文件夹，具体文件构造如下 

 而后在根目录下的 index.js 中导入 modules，这里设置 namespace 是为了防止命名抵触 

 配置好 module 后就能够在组件中调用数据了，在调用办法上有个小坑，具体看图 

 到这里，根本的配置和调用就实现了。要实现两个组件同步显示输出的性能，只须要在左侧 input 标签上绑定 change 函数，由 change 函数提交 mutations 实现 store 的数据变更；右侧筛选条件的显示则由标签双向数据绑定 store 中的数据，当监听其发生变化时自动更新，从而实现了本次优化。