vuex选用他是因为对vue项目公用数据进行管理,从而解决组件之间数据相互通信的问题,里面可以放一些公共共享的数据,里面的数据所有组件都可以拿到。vuex有五种属性分别是state getter mutation action module
vuex的实现原理:通过new.vuex.store创建了一个仓库,state是公共共享的对象存数据的,对应的一般是vue对象里面的data,mutations:使用他来修改state和getters数据,getters:类似vue中的计算属性,
action:类似于methods,可以用于发起异步请求,module是用于模块拆分。
这里面最重要的就是这个stste和mutations。
那么vue和vuex是怎么联系起来的呢?
在创建项目的时候vue-cli 我们直接选用vuex项,这样就不用做任何配置了,脚手架会自动帮我们完成。
1:我们要新建一个store文件夹,在这个文件夹下建立index.js文件。
在这里面我们要引入vue,在引入下vuex,还有使用下vuex,然后创建一个store仓库,里面有state。最后要导出这个store
2:我们要在vue实例中main.js中,注入store
3:使用:
在组件中我就可以用
this.$store.state.属性名来获取这个公共数据,
在模块中我就可以用{{$store.state.属性名}}获取,下面这个就是.user
4:那我要进行修改怎么办?
在组件中通过this.$store.commit('mutation事件名',mapper参数)
可以修改state里面的数据。
那么mapState是干什么的呢?为什么要引入?
导入辅助函数mapState,他是vuex中定义的一个工具函数,在组件的内部去引用一下这个mapState --- import { mapState } from 'vuex' 这样我在组件中就可以把公共数据映射到这个组件内部的计算属性当中,例如这样
computed:{
...mapState(["user"])
}
那么映射有什么用呢?
映射使你可以将 state 中的任何一种属性(state、getter、mutation 和 action)绑定到组件中的计算属性,并直接使用 state 中的数据。
当然没有映射我当然也可以进行访问state里面的值,但是需要调用getdata()方法然后写return this.$store.state.data,那么随着state的数据量变得很多里面有很多的对象,就会变得很不好看,而当我们有了映射以后我们可以访问用户中整个用户对象,把原先state的的对象添加到mapState方法中。例如user我们直接就可以调用这个user。