问题场景:在优化项目交??互体验时,想在左侧表单中输入数据,过滤条件组件右边显示同步输入功能,第一时间想到用vuex,因为vuex升级到4.0了,语法变化很大。首先查看了官方文档vuex官方文档,看到了项目结构。modules命令是在store目录下新建一个modules文件夹,以后所有的模块文件都放在这个文件夹下。具体文件结构如下,然后将modules导入到根目录下的index.js中。这里设置命名空间是为了避免命名冲突配置好模块后,就可以调用组件中的数据了。调用方法有个小洞。具体看这里的图片,基本的配置和调用都实现了。实现两个组件的同步显示input功能,只需要在左边的input标签上绑定change函数,change函数提交mutation,实现store的数据更改;右边的过滤条件的展示是通过store中标签的双向数据绑定来控制的,当监听到变化时会自动更新数据,从而完成本次优化。
