~~~ 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']) } }; ~~~