当前位置: 首页 > Web前端 > JavaScript

vuex模块化使用

时间:2023-03-26 23:54:38 JavaScript

vuex在vuex模块化开发中自动引入modlues模块。如果使用多个模块,每次导入就有点麻烦。我们可以使用自动导入的方法。废话不多说,直接上干货!文件夹结构|-store|-index.js//入口文件|-modules//文件夹|-app.jsindex.js入口文件codeimportVuefrom'vue'importVuexfrom'vuex'importgettersfrom'./getters'Vue.use(Vuex)//你不需要`importappfrom'./modules/app'`//它将自动从模块文件中获取所有vuex模块constmodulesFiles=require.context('./modules',true,/\.js$/)constmodules=modulesFiles.keys().reduce((modules,modulePath)=>{//设置'./app.js'=>'app'constmoduleName=modulePath.replace(/^\.\/(.*)\.\w+$/,'$1')constvalue=modulesFiles(modulePath)modules[moduleName]=value.defaultreturnmodules},{})exportdefaultnewVuex.Store({getters,modules})app.js写法conststate={}constmutations={}constactions={}exportdefault{namespaced:true,state,mutations,actions}此时添加一个新的需求,在vuex的开发过程中数据刷新会重置,所以我们在浏览器中缓存一些数据。那么我们如何自动将浏览器的缓存导入到vuex中呢?导入浏览器缓存数据我们创建一个名为cache.js的新缓存文件。代码如下conststate={CACHE:null,}/*从本地存储读取数据*/for(variteminstate){localStorage.getItem(item)?(state[item]=JSON.parse(localStorage.getItem(item)||'')):false;}exportdefault{state}