Vue（四十一）、Vuex的应用

一、state的使用（将共用的数据放在state中）

 

2、action与mutations的使用（在页面中写方法，通过dispatch与actions连接，actions连接mutations连接，最后在页面调用）

 如果不需要处理复杂逻辑，不写actions时可以直接 省略这一步通过commit与mutaions连接

3、getters 的使用（当state中的数据需要经过加工后再供多个组件使用时，可以使用getters加工）

组件中读取数据：$store.getters.bigSum(bigSum为自定义可变)

 

4、四个map 的使用(mapGetters/mapState/mapMutations/mapActions)

当有多个数据放在state或getters中时，页面获取{{$store.state.sum}}或{{$store.getters.bigSum}}模板字符串看着繁琐，可以在页面中使用computed计算相关属性后页面直接获取{{sum}}，{{bigSum}}使代码看起来美观

 通过计算属性写时依然繁琐，可以借助vuex 的mapGetters或mapState方法简写

 

总结：四个方法用法一样，都需要引入，都是为了方便书写，不同之处在于mapGetters/mapState使用时页面调用方法不需要传参，mapMutations/mapActions需要传参

 content 中包含与vuex及共用数据相关的内容，

组件间共用数据

1、使用map写法

2、不使用map写法，纯手写