# 第八章vuex
~~~
import {mapstate,mapMutations,mapGetters} from 'vuex'
~~~
## 1.vuex中的`mapState`在组件的计算属性中使用vuex的数据
~~~
import {mapState} from "vuex"
export default {
computed:{
...mapState(['city'])
}
};
//这样计算属性中有了一个city属性,在页面中直接使用就可以了
~~~
~~~
computed:{
...mapState{
currentCity:'city'
}
}
//也可以是对象
~~~
## 2.vuex的`mapMutations`
~~~
import {mapState,mapMutations} from "vuex";
~~~
~~~
methods:{
handleCityClick(city){
//调用传参
this.changeCity(city);
this.$router.push('/')
},
//向vuex的mutations属性派发一个changeCity事件
...mapMutations(['changeCity'])
},
~~~
## 3.vuex的getter
> 作用：类似组件中的计算属性
~~~
//1.在vuex store.js中设置
getters:{
doubleCity(state){
return "城市:"+state.city
}
}
~~~
~~~
//2.在组件中使用
import {mapState,mapGetters} from "vuex"
export default {
computed:{
...mapState(['city']),
...mapGetters(['doubleCity'])
}
};
~~~
