这是我参与11月更文挑战的第30天，活动详情查看：2021最后一次更文挑战
state
如果想要使用state，基础用法是在组件的computed中通过方法 return this.$store.state.XXX
computed:{
msg(){
return this.$store.state.msg
}
}
- 这样的使用可能会比较麻烦，因此可以使用辅助函数mapState，使用方式如下
//首先是引入mapState
import {mapState} from 'vuex'
//mapState的使用方法有多种
computed:mapState({
msg(state){ //这里的state相当于mutation中的state
return state.msg
}，
//也可以箭头函数的写法
msg: state => state.msg,
//也可以直接如下写法
msg:'msg'
})
//或者直接这样使用
computed:mapState(['msg'])
//上面这种写法很好用，但有一定的问题，这样就没办法写正常的computed中的处理函数了，又因为mapState(['msg'])是一个对象，因此可以按下面这种写法来使用
computed:{
...mapState(['msg'])
}
mutation
mutation是修改state的唯一入口，如果想要修改state就必须使用mutation，mutation在写法上是一个函数，调用时需要使用commit，写法如下
const store = new Vuex.Store({
mutation:{
setCount(state,payload){ //payload是触发commit时候传递过来的数据
//通过state.XXX来改变state中的值
state.count++
}
}
})
//触发mutation的基础用法是常用在在组件的methods中，通过this.$store.commit('setCount','数据')
- 除了上述的方法还有简便的方法，如下
methoods:{
setMsg(){
this.$store.commit('setMsg','新的内容')
}，
//<butto @click="setMsg('新值')"></button>
...mapMutations(['setMsg'])//这种写法如果在调用它的地方写上参数，也就是payload
//上面这种写法我们就省了一个写函数的过程
//<butto @click="clickHandleer('新值就是payload')"></button>
...mapMutations({
clickHandleer:'setMsg'
})
//这种写法也是可以的
注意：在使用mapMutations之前也是要引入的
import {mapMutations} from 'vuex'
}
action
action类似于mutation,action需要通过this.$store.dispatch('action名字')对action进行分发
const store = new Vuex.Store({
state:{
list:[]
},
mutation:{
setList(state,data){
state.list = data
}
},
action:{
//在action中不能修改state，action中可以commit mutation
//context就是store，我们用的其实就是store.commit来通过mutation来改变state中的值，这里可以用结构赋值的方法来写getList({commit}){}
getList(context){
axios.get().then(res =>{
context.commit('setList',res.data)
})
}
}
])
//触发action的基础用法是this.$store.dispatch('getList')
- action也有简便写法，和mutations类似
...mapActions(['setMsg'])//两个名字（事件名字和action中的名字）一样时就用数组的形式，要不就用对象的形式
...mapActions({
事件名字:'setMsg'
})
getter
- getter可以从state中获取到新的格式的数据（这里可以理解为组件中的computed的用法）
- 我们在组件中可以把getter当做state来使用
- getter的两个参数分别是state和getters，因此我们可以根据state或者getter来获取到我们想要的数据
const store = new Vuex.Store({
getters:{
getter名字(state,getters){
return
}
}
})
//getter的基础用法this.$store.getters.XXX
- getters也有简便用法，和state的简便用法类似
总结
上述所说的简便方法只是一种解耦，代码中看不到了$store而已，如果记不住只要会用基础用法也是可以的，vuex中的重要内容就是，state是状态管理，mutation是修改state的唯一方法（需要用commit）mutation中只能是同步操作，action中是异步操作，但不能更改state，所以要通过dispatch来分发，再通过mutation中的commit来修改state，getters就相当于我们组件中的computed，是让我们可以获取到新的格式的数据（比如说state中符合某个规则的数据）
