我的理解:
概述:state(存数据) getter(取出并修剪数据,类似computed) mutations&actions(增删改数据)
上半部分:
-
state: 把数据(状态)都收集起来(发送给服务器的数据,接收的数据,用户输入的数据,需要计算的数据,一切的一切),是数据收集池
-
mutations和actions: 这两个为什么一起说?因为两者功能都是一样的,都是对数据的修改(也叫状态修改),
区别在于:
一、mutations只能执行同步操作,而从服务器获取数据等异步操作就要交给actions,
二、mutations是大哥,actions是二弟,只有大哥有修改state数据的权限,actions想要异步修改数据,要先给大哥mutations,大哥再给state -
getters: 可以认为是computed方法
下半部分:
这样,这四大金刚功能我们就知道了,知道功能,也就知道他们需要哪些变量或者方法了
getters写法以及需要的变量/方法:
①类似于computed方法,是对state里的数据加以修剪,所以需要state对象
export default{
gettersName( state ){
//修剪state里的数据
return afterState //把修剪完的数据返回出来,如果组件想用这个修剪完的,在组件内调用(...mapGetters)即可
}
}
mutations写法以及需要的变量/方法:
- pre:先给此次修改起个名 -可以单独建一个js文件(type.js/mutation-type.js),用大写常量表示
- ①修改数据 -至少需要拿到数据吧,所以需要state对象
- ②接收actions传来的数据(可以不写) -这个数据官网叫payload
- after:数据修改后传state -直接点语法就能修改了
export default{
[ mutation-type (大写字符串) ] (state, { resultData } ) { //resultData要和actions传过来的数据名称一致
//拿到actions传过来的数据放进state池子里面
state.resultData = resultData
}
}
actions写法以及需要的变量/方法:
- ①先给此次修改起个名 -驼峰命名
- ②异步操作需要上传和接收的数据 - 上传需要用到state,所以需要传入state
- ③修改数据只能commit给mutation -需要commit方法
export default{
getNews({commit,state},payload){ //payload是需要从组件内获取一并发往服务器的数据
//一通异步操作(ajax),得到结果resultData
commit(GET_NEWS,{resultData})
}
}
备注:
- actions接受的是context方法,包括
context.commit,
context.getters,
context.state - 组件内this.$store.dispatch(action名,需要传入的数据)可以触发action
映射写法:
mapActions([])
methods:{
...mapActions(['getAddress'])
}
//怎么用?
mounted(){
this.getAddress()
},
mapState([state里的属性名])
computed:{
...mapState(['address'])
}
//怎么用?
mounted(){
console.log(this.address)
}
mapGetters([getters里的计算后属性名])
coumputed:{
...mapGetters(['afterCounted')])
}
//怎么用?
mounted(){
console.log(this.afterCounted)
}
mapMutations([mutations里的方法名(写成对象也行)])
methods:{
//可以这样写:
...mapMutations(['addFunction')])
//这样写怎么用?
mounted(){
this.addFunction()
}
//也可以这样写
...mapMutations({add:
'addFunction'})
}
//那这样写又怎么用?
mounted(){
this.add()
}