mapState,mapMutations,mapActions

mapState

mapState可以接收两种方式对象和数组
mapState的属性一定要和state的属性值相对应，也就是说 state中定义的属性值叫userInfo，那么mapState就叫userInfo

import {mapMutations,mapState,mapActions} from 'vuex'
//数组
computed:{
      ...mapState(['userInfo','shopCart']),//这里的要和state的变量名一样
    },
//对象
computed:{
      ...mapState({
        userInfo: state => state.userInfo,
      })
    },

在mounted打印this，当不使用mapState时，只有在$store里才有state数据

image.png image.png

当使用mapState时，还是在mounted打印this

image.png

如下，可以直接在页面上使用this.userInfo得到数据

image.png

mapActions

也是可以接收 两种方式对象和数组

import {mapMutations,mapState,mapActions} from 'vuex'
methods:{
    //数组
      ...mapActions(['login']),
    //对象
...mapActions({
        'login':'login'
      }),
  //调用
  this.login()
    }

mapMutations

和mapActions一样

image.png

使用时不加types

...mapMutations(['SET_USERINFO']),
//使用
let userInfo = { name:'Tom',age:20 }
this.SET_USERINFO(userInfo)