# 第八章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'])
}
};
~~~
