vuex各个参数
- state 存放状态
- mutations state成员操作
- getters 加工state成员给外界
- actions 异步操作
- modules 模块化状态管理
VueX的工作流程
- state 使用:
HTML中
<h1>{{ $store.state.name }}</h1>
js中
console.log(this.$store.state.name)
- mutations 使用:
mutations是操作state数据的方法的集合,比如对该数据的修改、增加、删除等等。state无法直接操作,只能用mutations操作
单个值提交时:
this.$store.commit('edit',15)
当需要多参提交时,推荐把他们放在一个对象中来提交:
this.$store.commit('edit',{age:15,sex:'男'})
接收挂载的参数:
edit(state,payload){
state.name = 'jack'
console.log(payload) // 15或{age:15,sex:'男'}
}
另一种提交方式
this.$store.commit({
type:'edit',
payload:{
age:15,
sex:'男'
}
})
Vue.set 为某个对象设置成员的值,若不存在则新增
Vue.set(state,"age",15)
Vue.delete 删除成员
Vue.delete(state,'age')
- getters 使用:
可以对state中的成员加工后传递给外界
Getters中的方法有两个默认参数:
state 当前VueX对象中的状态对象
getters 当前getters对象,用于将getters下的其他getter拿来用
getters:{
nameInfo(state){
return "姓名:"+state.name
},
fullInfo(state,getters){
return getters.nameInfo+'年龄:'+state.age
}
}
组件中调用:
this.$store.getters.fullInfo
- actions 使用
由于直接在mutation方法中进行异步操作,将会引起数据失效。所以提供了Actions来专门进行异步操作,最终提交mutation方法。
Actions中的方法有两个默认参数:
context 上下文(相当于箭头函数中的this)对象
payload 挂载参数
actions:{
aEdit(context,payload){
setTimeout(()=>{
context.commit('edit',payload)
},2000)
}
}
组件中调用:
this.$store.dispatch('aEdit',{age:15})
- Models 使用
当项目庞大,状态非常多时,可以采用模块化管理模式。Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。
models:{
a:{
state:{},
getters:{},
....
}
}
组件内调用模块a的状态:
this.$store.state.a
而提交或者dispatch某个方法和以前一样,会自动执行所有模块内的对应type的方法:
this.$store.commit('editKey')
this.$store.dispatch('aEditKey')
修改至:怪兽难吃素
文档:vuex
评价:我觉得作者"怪兽难吃素",总结的比官网好