vuex
2018-06-15 本文已影响0人
Hachiman
使用方法
在store.js里写store的配置
state:定义状态的值,相当于定义变量
getters:相当于计算属性
mutation:vuex提供修改状态值的方法,只能是提交mutations
action:接受一个参数,是一个与store实例具有相同方法和属性的context对象
state:{
'text':'天马流星拳'
},
getters:{
personInfo(state){
return state.name+"的绝招是"+state.text;
}
},
mutations: {
changeName(state,preload){//接受两个参数,一个是state,第二个是载荷(這个值是可以通过提交mutations时传入)
state.name = preload.name;
state.text = preload.text;
}
},
actions: {
actionName(context){//接受一个参数,是一个与store实例具有相同方法和属性的context对象
//這里的context相当于this.$store
console.log(context)
}
}
改变state的值
通过this.$store.commit()提交mutation,第一个参数为mutation的名字,第二个参数为提交的载荷
dispatch:含有异步操作,例如向后台提交数据
this.$store.commit("changeName",{name:"子园二号",text:"庐山升龙霸"});
this.$store.dispatch("actionName")
在HTML中渲染state中的值
<div class="about">
<p>{{this.$store.state.name}}</p>
</div>