問題場景：在優化項目的交互體驗時，想實現在左側表單輸入數據，右側篩選條件組件同步顯示輸入的功能，第一時間想到使用vuex

由於vuex升級到了4.0，語法發生了較大的變化，首先查詢官方文檔

vuex官方文檔

看到項目結構引起了我的注意，考慮到後期管理項目能更加便利，使用modules勢在必行

在store目錄下新建modules文件夾，之後的module文件都放在這個文件夾，具體文件結構如下

然後在根目錄下的index.js中導入modules，這裏設置namespace是為了避免命名衝突

配置好module後就可以在組件中調用數據了，在調用方法上有個小坑，具體看圖

到這裏，基本的配置和調用就實現了。要實現兩個組件同步顯示輸入的功能，只需要在左側input標籤上綁定change函數，由change函數提交mutations實現store的數據變更；右側篩選條件的顯示則由標籤雙向數據綁定store中的數據，當監聽其發生變化時自動更新，從而完成了本次優化。