vuex管理状态仓库详解

1.什么是Vuex？Vuex是专门为Vue.js应用程序开发的状态管理模式。它使用集中存储来管理应用程序所有组件的状态，并使用相应的规则来确保状态以可预测的方式变化。Vuex也集成到Vue官方调试工具devtoolsextension中，提供零配置穿越调试、状态快照导入导出等高级调试功能，采用全局单例模式分离管理共享状态组件，使得组件树中的每个位置都可以获得共享状态或触发行为。那么什么是状态呢？我理解state是在不使用vuex的情况下，当前组件中数据需要共享的状态。vuex使状态或行为成为共享状态，共享的状态或行为可以在各个组件中访问，省去子与子之间传递变量，提高开发效率。2.不使用vuex和使用vuex的区别?当我们不使用vuex时，组件之间传递信息会比较麻烦。不使用vuex时父子之间传递信息：在App.vue文件中：在Good.vue文件中：兄弟之间传递信息：首先创建一个js文件作为兄弟二人传递Button，这里命名为msg.js//CreateandexposevueimportVuefrom'vue';exportdefaultnewvue兄弟组件Goods:兄弟组件Fruits:App组件中的代码：点击按钮：上面是兄弟组件之间的传值，是不是觉得有点麻烦？刚开始学习vue组件传值的时候，也觉得这个方法很麻烦。vuex很好的解决了这个问题，写代码也很开心使用vuex共享状态数据store.js中的配置：importVuefrom'vue';//从'vuex'引入vueimportVuex;//引入vuexVue.use(Vuex)//声明使用Vuexconststate={count:1,totalName:'total'}conststore=newVuex.Store({state})exportdefaultstoreApp.vue中配置:Good.vue中的配置Fruits.vue以上为简单参考state数据值使用vuex例如将数据放在state中进行管理，引入辅助功能将state中的数据导入到组件中，在组件中调用。这个方法是不是比不使用vuex更简单？但这只是一个非常非常浅薄的开始，进入下面的正文！！！3、使用vuex安装vuex打开终端，输入命令行npminstallvuex--save下载vuexvuex的核心概念：State：共享状态，相当于组件中data中的数据，只不过变成了此时为全局变量。Getter：基于state的派生状态，相当于组件中computed中的一个属性。Mutation：改变vuex中store共享状态中的方法，通过提交mutation修改状态，进行同步操作数据。通常用于action获取异步数据，通过commit获取提交给mutation的数据，mutation同步运行状态的数据。action：支持异步操作，可用于异步获取请求中的数据，并将获取到的数据同步提交给mutation，实现ajax异步请求数据，mutation会将自己的数据同步到state中。module：为了方便项目后期的管理，对store中的state、mutation、action、getter进行分子模块化管理。我们下面的介绍会在Module规范中介绍。模块子模块管理对于子模块管理，我们需要创建一个名为index.js的核心管理对象库和其他状态、getter、mutations、actions。将其引入store模块并暴露Store对象，以下为代码部分。模块结构Vuex应用核心管理仓库store?以下是store的代码。这里我们将js命名为index.js。通过在商店中引入状态、突变、动作和吸气剂，商店对象被暴露出来。/*vuex核心管理对象库*/importVuefrom'vue';importVuexfrom'vuex';importstatefrom'./state';importmutationsfrom'./mutations';importactionsfrom'./actions';importgettersfrom'./getters';//声明使用插件Vue.use(Vuex)//新建一个Vuex对象，配置state、mutation、action、getters到vuex的store中，方便数据managementexportdefaultnewVuex.Store({state,mutations,actions,getters,})state状态管理数据我们通常把需要管理的共享数据放到state中，让它看起来像一个全局变量，引入state到所需的组件状态数据。以下是state中的代码示例：/*stateobject*/exportdefault{userInfo:{},//用户信息count:1}mutation-types使用常量代替mutationevent是一种很常见的模式类型，而这些常量放在单独的文件中，可以让你的代码协作者一眼就看懂你的代码，增强你代码的可读性。下面的代码只是一个例子，所以这次只介绍一种方法。/*一个包含n个mutations的类型名常量*/exportconstRECEIVE_USER_INFO='receive_user_info'//接收用户信息的异步??操作actions-actions类似于mutations，但是可以进行异步操作，将异步操作得到的数据提交给mutations，使得mutations改变state中的状态数据，这在ajax请求中常用于获取数据（因为是异步的），将获取到的数据提交给mutations来更新state数据state。这里发送ajax请求的代码就不在演示了。你可以理解为action中的数据是通过发送ajax请求获取的。这时候也可以体现出在action中可以进行异步操作。如下代码：/*多个通过mutation间接更新状态的方法的对象*/import{RECEIVE_USER_INFO,//引入mutation-types中定义的常量}from'./mutation-types';import{reqUserInfo,}from'../API';//这里介绍发送ajax请求的方法exportdefault{//异步获取用户信息asyncgetUserInfo({commit}){//介绍发送请求数据的方法，异步等待数据，并将数据赋值给resultconstresult=awaitreqUserInfo()//当获取到数据成功时，result.code为0，失败则为1。这里用来判断状态数据是否获取成功if(result.code===0){constuserInfo=result.data//获取请求中的数据//将其方法和请求后获取的用户信息通过commit传递给mutationcommit(RECEIVE_USER_INFO,{userInfo})}}}注意：在组件中应用如下方法调用vuex组件中的方法：this.$store.dispatch('getUserInfo')mutations同步提交数据mutations用于改变state中的状态逻辑，改变state状态下的数据同步。你需要知道的是，在vuex中，你只能通过mutation来修改state对象。可以通过获取actions获得的数据来修改状态，也可以直接在mutations模块中定义方法来改变状态数据。通过mutations和上面的actions模块，也可以看到mutation模块中使用了commit。在组件中调用它的mutation模块的代码是：this.$store.commit('increment')下面mutation模块中的代码：/*直接更新状态的多个方法的对象*/import{RECEIVE_USER_INFO,}from'./mutation-types';exportdefault{//方法中第一个默认参数是state，也可以传入额外的参数，就是mutation的负载(playload)[RECEIVE_USER_INFO](state,{userInfo}){state.userInfo=userInfo},//在mutation模块中直接改变state状态数据，无需actionsincrement(state){state.count=3}}Getters处理stateGetters相当于处理state的computedproperties状态数据有两个默认参数，第一个默认参数是state，第二个默认参数是getters。在组件中调用该方法的代码片段为：this.$store.getters.totalCount()下面是Getters中的代码片段：/*一个包含多个基于状态的getter计算属性的对象*/exportdefault{plusCount(state){returnstate.count+1},//获取state中的state数据对象，获取getters模块中的plusCount数据totalCount(state,getters){returngetters.plusCount+state.count}}然后for以上store我们就简单的介绍完了，相信大家看完之后会对vuex有一定的了解。那么这个时候，我们就不得不想，用this.$store.state或者this.$store.getters.xxx是不是很麻烦？接下来介绍另一种引入state和getters的方法。辅助函数mapState和mapGetters?上面引用state和getters的方法，你是不是很烦恼呢？使用mapState你会感到方便。//首先我们需要引入辅助函数import{mapGetters,mapState}from'vuex'exportdefault{computed:{//使用对象扩展操作符将getter混合到计算对象中...mapGetters(['plusCount','totalCount',])//使用对象扩展操作符将state混合到计算对象中...mapState(['userInfo','count'])}}以上就是vuex的详细讲解，希望可以帮助大家对vuex有所了解，感兴趣的话，点个赞吧！