store
使用了vuex之后,自动绑定到vue实例上的数据,这个数据就是当前vuex仓库的实例对象。
数据存放到仓库,每个组件都可以拿来用。
1.如何将仓库中的state数据拿到组件中使用
- 通过 this.$store.state.xxxx的方式 (不推荐)
- 通过computed去取出仓库数据(推荐)
? 为什么使用仓库中的state数据需要computed中取出?
!应为 state 中的数据不允许直接修改,用在computed中会更好,如果修改,会报错! - 使用 mapState() 这个辅助函数的方式 (更推荐)
mapState()
import {
mapState} from 'vuex'
export default {
//一、这种方式缺点,组件不能使用多个computed,去创建本地的computed,例如 姓-名 的合并。且在html中调用的时候不能修改名字,仓库中是什么就是什么
computed:mapState(['仓库中的数据名'])
// 二
computed:{
// abc() 可以任意修改
abc(){
return this.$store.state.xxx(仓库中数据名)
}
}
//三 ,需要使用多个computed的时候
computed:{
...mapState(['xxx(仓库中数据名)']),
fullName () {
return this.firstName + ' ' +this.lastName
}
},
}
2.如何将仓库中getter数据拿到组件中使用
- this.$store.getters.xxx 的方式 (不推荐)
- 通过 computed 去仓库中取出 getter 的数据 (推荐)
代码部分
// 方法一
// 方法二
computed:{
//直接调用 aaa
aaa(