vuex是为Vue.js设计的的一种状态管理模式,可以理解为是一个共享的数据单元,通过vuex能够方便地实现数据的传递与更新。相较于以往的数据传递,vuex更简洁,更优雅。
vuex的重要部分
- state 状态
- mutations 更改状态
- getters 获取状态
- actions 异步更改状态
这些是vuex的核心内容,下一部分对其详细介绍。
使用vuex
state
state中存放了我们的数据,如同仓库一般:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 1
},
mutations: {
},
actions: {
}
})
在其他组件中便可以使用数据:
<h1>{{this.$store.state.count}}</h1>
getters
getter和vue中的计算属性有异曲同工之妙,可以如同变量般直接调用:
在这个示例中,目标是得到成绩不及格的人数:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
list:[
{name:"wang5",score:40},
{name:"li4",score:50},
{name:"zhang3",score:60},
{name:"zhao6",score:70},
]
},
getters:{
fail(state){
let a=0;
state.list.forEach(item=>{
if(item.score<60){
a++
}
})
return a;
}
}
})
<h1>{{this.$store.getters.fail}}</h1>
结果:
mutations
mutations是修改存放在仓库里的数据值的唯一推荐方法,
虽然使用其他方法似乎也能实现修改值,但是强烈反对使用。
在这个示例中,定义一个按钮,每点一次使state中的conter的值加一
<template>
<div class="home">
<button @click="f">点击加1</button>
<h3>{{this.$store.state.conter}}</h3>
</div>
</template>
<script>
export default {
name: "home",
methods: {
f(){
this.$store.commit("add")
}
}
};
</script>
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
conter:1
},
mutations: {
add(state){
state.conter++
}
}
})
运行效果:
actions
当处理异步的数据变化时,使用actions。
值得一提的是,actions提交后依然是mutations,所以这与上一部分中提到的的“mutations是修改存放在仓库里的数据值的唯一推荐方法”并不矛盾。
这个实例中,点击按钮3秒后conter值加1
<template>
<div class="home">
<button @click="f">点击加1</button>
<h3>{{this.$store.state.conter}}</h3>
</div>
</template>
<script>
export default {
name: "home",
methods: {
f(){
this.$store.dispatch("addAsyncNum")
}
}
};
</script>
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
conter: 1
},
mutations: {
add(state) {
state.conter++
}
},
actions: {
addAsyncNum(context) {
setTimeout(function () {
context.commit("add")
}, 3000)
}
}
})
mapXX
觉得上面的写法还是有点繁琐??不要着急,我们还有更优雅的用法,那就是mapState、mapMutations、 mapGetters、mapActions。
看这一段代码:template>
<div class="home">
{{conter}}
</div>
</template>
<script>
import {mapState} from "vuex"
export default {
name: "home",
computed:{
...mapState(["conter"])
}
};
</script>
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
conter: [1,2,3,4,5]
}
})
运行结果:
在这个示例中,我们使用mapState
成功输出了conter,
我们用这种简洁的方法规避了冗长的this.$store.state.count
,
其余的mapMutations
、 mapGetters
、mapActions
用法也是如此。
需要注意的是,使用mapXX的方式,需要先导入,如: import {mapState} from "vuex"
使用mapXX时,有如下对应关系:
结束
本文乃学习过程之总结,难免有不足之处,希望有所帮助。