~~~ import {mapstate,mapMutations,mapGetters} from 'vuex' ~~~ ## 1.vuex中的`mapState`在組件的計算屬性中使用vuex的數據 ~~~~javascript import {mapState} from "vuex" export default { computed:{ ...mapState(['city']) } }; //這樣計算屬性中有了一個city屬性,在頁面中直接使用就可以了 ~~~~ ~~~javascript computed:{ ...mapState{ currentCity:'city' } } //也可以是對象 ~~~ ## 2.vuex的`mapMutations` ~~~ import {mapState,mapMutations} from "vuex"; ~~~ ~~~javascript methods:{ handleCityClick(city){ //調用傳參 this.changeCity(city); this.$router.push('/') }, //向vuex的mutations屬性派發一個changeCity事件 ...mapMutations(['changeCity']) }, ~~~ ## 3.vuex的getter > 作用：類似組件中的計算屬性 ~~~javascript //1.在vuex store.js中設置 getters:{ doubleCity(state){ return "城市:"+state.city } } ~~~ ~~~javascript //2.在組件中使用 import {mapState,mapGetters} from "vuex" export default { computed:{ ...mapState(['city']), ...mapGetters(['doubleCity']) } }; ~~~