vuex详解一：彻底弄懂state、mapState、mapGetters、mapMutations、mapActions
一 、state
先看一下标准的store目录结构
入vuex 以后，我们需要在state中定义变量，类似于vue中的data，通过state来存放共享的1状态
-store
--actions
--mutations
--getters
--mutations-type
--index.js复制代码index.js是总入口
importVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)
import state from'./state.js'import actions from'./actions.js'import mutations from'./mutations.js'import getters from'./getters.js'exportdefaultnewVuex.Store({
state,
actions,
mutations,
getters
})
复制代码我们在state.js中定义变量
exportdefault {
userInfo:{
userName:"油炸皮卡丘",
age:"22",
sex:"女"
},
token:"aerfrftregtyrb.rytyuhjyi",
friends:["Tom","Herry","Lucy"],
likes:["吃饭",'睡觉','看电影'],
money:250
}
复制代码在组件中使用，在App.vue中自定义两个组件
<divid="app"><about></about><home></home></div>复制代码about.vue里面的内容
<h1>{{$store.state.userInfo.userName}}</h1> //油炸皮卡丘
复制代码home.vue里面的内容
<h1>{{$store.state.userInfo.age}}</h1> //22
复制代码如图，显示出显示出相应的内容，有了vuex，我们不必在考虑组件之间的传值，直接就可以通过$store来获取不同的数据
但是如果需要vuex中的多个数据的这时候，这样写就太啰嗦了，我们可以将它定义在computed中。
props，methods,data和computed的初始化都是在beforeCreated和created之间完成的。
例如
<template>
<divclass="home">
{{userName}}
</div>
</template>
<script>exportdefault {
name: 'home',
computed:{
userName(){
returnthis.$store.state.userInfo.userName
}
}
}
</script>复制代码这样引入就方便了很多。
1.2 mapState辅助函数
使用this.$store.state虽然可以很方便的将state里面的值融入computed，但是如果要取多个值，就会出现以下的情况
computed:{
userInfo(){
returnthis.$store.state.userInfo
},
token(){
returnthis.$store.state.token
},
friends(){
returnthis.$store.state.friends
},
likes(){
returnthis.$store.state.likes
}，
...
}
复制代码特别多的话就会很麻烦，而这时候vuex又给我们提供了更简便的方法mapState方法,
该方法就可以自动将需要的state值映射为实例的计算属性
我们可以这样写
import {mapState} from'vuex'exportdefault {
name: 'home',
computed: mapState(['likes','friends','token','userInfo'])
}
复制代码mapState(['likes','friends','token','userInfo']) //填入哪些字段就会将这些字段自动映射为一个计算属性复制代码所以
mapState(['likes','friends','token','userInfo'])
复制代码等价于下面的代码
userInfo(){
returnthis.$store.state.userInfo
},
token(){
returnthis.$store.state.token
},
friends(){
returnthis.$store.state.friends
},
likes(){
returnthis.$store.state.likes
}，
复制代码记住：用mapState等这种辅助函数的时候，前面的方法名和获取的属性名是一致的。
如果我们需要自定义一个计算属性怎么办呢？怎么添加呢？
毕竟现在已经成这样了 computed: mapState(['likes','friends','token','userInfo'])
这时候我们就需要es6中的展开运算符：...。将mapState映射的计算属性追加上去，而不是覆盖原有的
computed: {
value(){
returnthis.val++
},
...mapState(['likes','friends','token','userInfo'])
}
复制代码在模板中使用
<h2>{{userInfo.userName}}</h2> //油炸皮卡丘
复制代码关于别名
有时候，我们映射的时候，想给计算属性起个新的名字,不想用原有的属性名，那就可以像下面这样做，用对象的形式去别名
computed: {
value(){
returnthis.val++
},
...mapState({
myLikes:"likes",
myFriends:"friends",
theUserInfo:"userInfo"
})
}
复制代码这样我们就可以在模板中使用
<h2>{{theUserInfo.userName}}</h2> //油炸皮卡丘
复制代码二、getters
getters相当于vue中的计算属性，能拿到state里面最新的值
而且getters允许传参，第一个参数就是state
这样，通过getters进一步处理，得到我们想要的值，
getters.js
exportdefault{
realName:(state)=>{
return state.userInfo.userName+''
},
myMoney:(state)=>{
return (state.money/7).toFixed(2)
}
}
复制代码在实例中我们可以这样用
computed: {
valued(){
returnthis.value++
},
realName:this.$store.getters.realName,
myMoney:this.$store.getters.myMoney,
}
复制代码2.2 mapGetters辅助函数
mapGetters函数具有mapState的作用，而且其主要用法也是一样的，也能将getters的属性映射到实例的计算属性
computed: {
valued(){
returnthis.value++
},
...mapGetters(['realName','myMoney'])
}
复制代码同样也可以取别名
computed: {
valued(){
returnthis.value++
},
...mapGetters({
myRealName:"realName",
myFormatMoney:"myMoney"
})
}
复制代码但有人就要问了，二者的作用实际上都一样？到底用哪个？或者说二者还有什么实质上的区别？
上面说过，getters可以传参，这才是getters和mapState的区别
那么如何传参呢?
getters的第一个参数是state
有这样一个场景，我们不想取所有的state里面的friends值，而是想根据我们传入的值筛选一下
那我们只要在getter返回的值套上一层函数那我们就可以实现传参数
exportdefault{
realName:(state)=>{
return state.userInfo.userName+''
},
myMoney:(state)=>{
return (state.money/7).toFixed(2)
},
myFriend:(state)=>{
//返回一个函数用于接收我们传入的筛选值returnfunction (friendName) {
return state.friends.find(item => item === friendName)
}
}
}
复制代码很显然，getters不仅可以像mapState一样拿到state里面的值，而且还可以在拿到之前，对值进行我们想要的加工
从而“派生”一些新的值，以满足我们不同的业务需要
淡然，如果不需要派生新的值，
this.$store.getters.值 就等于 this.$store.state.值
复制代码三、mutation
我们代码中定义的时候需要些mutations，它类似于vue中的methods，
mutations需要通过commit来调用其里面的方法，它也可以传入参数，第一个参数是state，第二个参数是载荷（payLoad），也就是额外的参数
我们只能通过mutation去更改state里面的值
mutations.js
exportdefault {
addAge:(state,payLoad)=>{
state.userInfo.age+=payLoad.number
},
changeName:(state,payLoad)=>{
state.userInfo.userName+=payLoad.userName
},
addFriend:(state,payLoad)=>{
if(state.friends.indexOf(payLoad.newFriend) < 0){
state.friends.push(payLoad.newFriend)
}
},
setUserInfo:(state,payLoad)=>{
state.userInfo=payLoad.userInfo
},
setToken:(state,payLoad)=>{
state.token=payLoad.token
}
}
复制代码在模板中使用
<div class="home">
<button @click="handleAddAge">增加一岁</button>
<button @click="handleAddFriend">增加一个朋友</button>
</div>
复制代码js部分
methods:{
handleAddAge(){
//使用mutation不像之前state、getters一样直接点调用，而是用commit关键字来提交mutationthis.$store.commit('addAge',{
number:1
})
},
handleAddFriend(){
let name="皮卡丘";
this.$store.commit('addFriend',{
newFriend:name
})
}
}
复制代码调用的时候第二个参数最好写成对象形式，这样我们就可以传递更多信息。
this.$store.commit('mutationName',{
key1:val1,
key2:val2,
key3:val3
})
复制代码但是，这样写还是会遇到同样的问题，就是如果需要操作多个数据，就会变的麻烦，这时候我们就需要mapMutations，通过它将方法映射过来
3.1 mapMutations辅助函数
跟mapState、mapGetters一样
不同的是，mapMutations是将所有mutations里面的方法映射为实例methods里面的方法
所以我们可以这样用
methods:{
...mapMutations(['addAge'])
}
复制代码mapMutations(['addAge'])这一句就相当于下面的代码
methods:{
addAge(payLoad){
this.$store.commit('addAge',payLoad)
}
}
复制代码参数我们可以在调用这个方法的时候写入
<button @click="AddAge({number:1})">增加一岁</button>
复制代码同样也可以有别名
methods:{
...mapMutations({
handleAddAge:'addAge'
})
}
复制代码<button @click="handleAddAge({number:1})">增加一岁</button>
复制代码这时候有些人要说了，我为什么要绕一圈，从mutations里面去改state呢？我能不能直接改state呢？
比如这样：
addAge(){
this.$store.state.userInfo.age +=5;
}
复制代码实际看结果也可以，那我为什么从mutations里面中转一下呢？
原因如下：
在mutations中不仅仅能做赋值操作
Vue.js在mutations中做了类似埋点操作，如果从mutations中操作的话， 能被检测到，可以更方便用调试工具调试，调试工具可以检测到实时变化，而直接改变state中的属性，则无法实时监测
注意：mutations只能写同步方法，不能写异步，比如axios、setTimeout等，这些都不能写，mutations的主要作用就是为了修改state的。
原因类似：如果在mutations中写异步，也能够调成功，但是由于是异步的，不能被调试工具追踪到，所有不推荐这样写，不利于调试,这是官方的约定。
3.2 使用常量替代Mutation事件类型
把原本的方法名称由字符串转变成常量
mutations.js
constADD_AGE ='addAge'constCHANGE_NAME ='changeName'constADD_FRIEND='addFriend'constSET_USER_INFO='setUserInfo'constSET_TOKEN='setToken'//然后用常量替换原有的方法名exportdefault {
[ADD_AGE](state,payLoad){
state.userInfo.age+=payLoad.number
},
[CHANGE_NAME](state,payLoad){
state.userInfo.userName+=payLoad.userName
},
[ADD_FRIEND](state,payLoad){
if(state.friends.indexOf(payLoad.newFriend) < 0){
state.friends.push(payLoad.newFriend)
}
},
[SET_USER_INFO](state,payLoad){
state.userInfo=payLoad.userInfo
},
[SET_TOKEN]:(state,payLoad)=>{
state.token=payLoad.token
}
}
复制代码为什么这样写？
不容易写错，字符串容易写错，而且字符串写错以后不会报错位置，而用常量替代，如果写错，eslint可以提示错误位置
当使用action派发mutation时，在action中使用同样的常量，避免手滑写错方法
用常量替代mutations的时候我我们可以新建一个文件（mutation_type.js）专门存储这些常量
mutation_type.js部分
constADD_AGE ='addAge'constCHANGE_NAME ='changeName'constADD_FRIEND='addFriend'constSET_USER_INFO='setUserInfo'constSET_TOKEN='setToken'export {
ADD_AGE,
CHANGE_NAME ,
ADD_FRIEND,
SET_USER_INFO,
SET_TOKEN
}
复制代码然后在mutations.js中引入
import {
ADD_AGE,
CHANGE_NAME,
ADD_FRIEND,
SET_USER_INFO,
SET_TOKEN
} from"./mutation_type.js"exportdefault {
[ADD_AGE](state,payLoad){
state.userInfo.age+=payLoad.number
},
[CHANGE_NAME](state,payLoad){
state.userInfo.userName+=payLoad.userName
},
[ADD_FRIEND](state,payLoad){
if(state.friends.indexOf(payLoad.newFriend) < 0){
state.friends.push(payLoad.newFriend)
}
},
[SET_USER_INFO](state,payLoad){
state.userInfo=payLoad.userInfo
},
[SET_TOKEN]:(state,payLoad)=>{
state.token=payLoad.token
}
}
复制代码四、actions
action类似于mutation
我们只需要记住一下几点：
action可以提交mutation,然后mutation去更改state
action不要直接去操作state，而是去操作mutation
action包含异步操作，类似于axios请求，可以都放在action中写
action中的方法默认的就是异步，并且返回promise
为什么？因为这是Vuex规定的
actions.js
import {
ADD_AGE,
CHANGE_NAME,
ADD_FRIEND,
SET_USER_INFO,
SET_TOKEN
} from"./mutation_type.js"exportdefault{
//定义一个异步获取用户信息的actionasyncgetUserInfo(context){
//context可以理解为它是整个Store的对象.类似于this.$store，里面包含了state，getter，mutations，actionsconst res = await axios.get('/接口url')
//这个时候就用到了 mutation_type.js
context.commit( SET_USER_INFO,{userInfo:res.userData}
)
},
//定义一个异步获取用户token的actionasyncgetToken(context){
const res = await axios.get('/接口url')
context.commit(
SET_TOKEN,
{token:res.token}
)
}
}
复制代码当然，我们可以通过解构的方式，将context对象里面的属性解构
asyncgetUserInfo:({commit,dispatch})=>{
const res = await axios.get('/接口url')
commit( SET_USER_INFO, {userInfo:res.userData})
}
复制代码想想一个实际开发场景，state里面的userInfo属性值是空的，当登录以后，再进行获取对应的信息。
登录以后，需要得到用户信息显示到界面上，那如何得到呢？
首先进入页面的时候调用actions中的getUserInfo方法
vue部分
<template>
<div>{{realName}}</div>
</template>
exportdefault{
computed(){
//第三步realName:this.$store.getters.realName
},
created(){
//第一步this.reqUserInfo()
},
methods:{
reqUserInfo(){
//第二步使用action不想之前state、getters一样直接点调用，而是用dispatch关键字来派发actionthis.$store.dispatch('getUserInfo')
}
}
}
复制代码来梳理一下上面的流程
页面初始化时调用 this.reqUserInfo()方法。 this.reqUserInfo()派发一个名为getUserInfo的action
在getUserInfo这个action中，我们执行了如下操作：
asyncgetUserInfo(context){
//1.从接口里异步获取数据const res = await axios.get('/接口url')
//2.将获取到的数据，通过commit提交一个mutation，去更改state里面的userInfo
context.commit( SET_USER_INFO,{userInfo:res.userData})
},
复制代码在computed中拿到最新的用户信息的用户名
//3.拿到最新的userInfo
realName:this.$store.getters.realName
复制代码所以看到这里，大家应该明白Vuex所谓的单向数据流
界面——>派发action——>action提交mutation——>mutation更改state——>getters返回最新的state值到界面
4.1 mapActions辅助函数
mapActions和mapMutations一样，它将actions里面的方法映射到methods
所以，当action多了，我们可以这样使用
methods:{
...mapActions(['getUserInfo','getToken'])
}
复制代码相当于
methods:{
getUserInfo(){
returnthis.$store.dispatch(‘getUserInfo’)
},
getToken(){
returnthis.$store.dispatch(‘getToken’)
},
}
复制代码当然也可以有别名
methods:{
...mapActions(
{reqUserData:'getUserInfo'},
{reqToken:'getToken'},
)
}
复制代码另外，补充一下
可以在action派发别的acton，如下
asyncgetUserInfo(context){
const res = await axios.get('/接口url')
context.commit( SET_USER_INFO,{userInfo:res.userData})
//此处派发另外一个action
context.dispatch('getToken')
},
复制代码5、总结一下
依赖state得到新的数据，用this.$store.getters.值
直接获取state的数据，用this.$store.state.值
同步修改state的属性值，就用this.$store.commit('mutation值')
异步修改state的属性值，就用this.$store.dispatch('action值')
mapState、mapMutations、mapGetters、mapActions等辅助函数，便于我们处理多个方法和属性
作者：清风夜半
链接：https://juejin.cn/post/6969553033545941022
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
1
0- 0
已为社区贡献5条内容
所有评论(0)