Vuex Mutation变更Store中的数据
以下办法是错误的
<template>
<div>
<p>{{$store.state.count}}</p>
<button @click="btnHandler">+1</button>
</div>
</template>
<script>
export default{
data(){
return{}
},
methods:{
btnHandler(){
this.$store.state.count++
}
}
}
</script>
只能通过mutation变更Store数据,不可以直接操作Store中的数据
正确的做法:
第一种做法:
在store.js中
const store = new Vuex.Store({
state:{
count: 0
},
mutations:{
add(state){
state.count++
}
},
})
在路由组件中
<template>
<div>
<p>{{$store.state.count}}</p>
<button @click="btnHandler">+1</button>
</div>
</template>
<script>
export default{
data(){
return{}
},
methods:{
btnHandler(){
// commit 的作用是调用某个mutation函数
this.$store.commit('add')
}
}
}
</script>
第二种做法:
在store.js中
const store = new Vuex.Store({
state:{
count: 0
},
mutations:{
add(state){
state.count++
}
},
})
在路由组件中
<template>
<div>
<p>{{$store.state.count}}</p>
<button @click="btnHandler">+1</button>
</div>
</template>
<script>
//从vuex中导入mapMutations函数
import { mapMutations } from 'vuex'
export default{
data(){
return{}
},
methods:{
//将指定的mutations函数,映射为当前组建的methods函数
...mapMutation(['add']),
btnHandler(){
this.add()
}
}
}
</script>