vuex的使用之mapMutations、mapState、mapActions

store.js文件如下：

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
    state: {
        token: "",
        showPopup: false,
        popupOption: {
            title: "标题",
            name: "",
            query: {},
            popupType: "", // 弹框类型 titleLeft 为标题在左边的那种弹框
        },
        level3Name: '' // 三级指标标题
    },
    getters: {
        getToken: (state) => state.token, //获取token
    },
    mutations: {
        SET_TOKEN: (state, token) => {
            state.token = token;
        },
        SET_SHOW_POPUP: (state, show) => {
            state.showPopup = show;
            if (!show) {
                state.popupOption = {
                    title: "标题",
                    name: "",
                    query: {},
                    popupType: "",
                };
            }
        },
        SET_POPUP_OPTION: (state, option) => {
            state.popupOption = option;
        },
        SET_LEVEL3_NAME: (state, name) => {
            state.level3Name = name;
        }
    },
   actions:{
        SET_NAME(content,show){
            content.commit('SET_SHOW_POPUP',show)
        }
    }
});

1.如果一个状态值或多个状态值需要在多个页面和组件中使用，那么可以使用mapState。

（1）在需要的组件内引入

import { mapState } from 'vuex';

（2）在组件计算属性里使用

computed: {
    ...mapState(['showPopup', 'popupOption']),
    current () {
      return this.popupOption.name
    }
  },

 2.如果一个方法或多个方法需要在多个页面和组件中使用，那么，可以使用mapMutations

（1）在需要的组件内引入

import { mapMutations } from 'vuex';

 （2）在组件methods里使用

methods: {
    ...mapMutations(['SET_SHOW_POPUP']),
    coloePopup() {
      this.SET_SHOW_POPUP(false)
    }
  },

 3.如果一个方法或多个方法需要在多个页面和组件中使用，也可以使用mapActions

 （1）在需要的组件内引入

import { mapActions } from 'vuex';

 （2）在组件methods里使用

methods: {
    ...mapActions(['SET_NAME']),
   handName(){
       this.SET_NAME(false)
    }
  },

总的来说使用了它们就不用传统的this.$store.state去获取状态值,也不用this.$store.commit(）或者this.$store.dispatch()。可以直接用this去调用了。