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. 1 つまたは複数の状態値を複数のページおよびコンポーネントで使用する必要がある場合は、mapState を使用できます。

(1)必要なコンポーネントに導入する

import { mapState } from 'vuex';

(2) コンポーネントの計算プロパティで使用されます

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

2. 1 つまたは複数のメソッドを複数のページおよびコンポーネントで使用する必要がある場合は、mapMutations を使用できます。

(1)必要なコンポーネントに導入する

import { mapMutations } from 'vuex';

(2) コンポーネントメソッドで使用

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

3. 1 つまたは複数のメソッドを複数のページおよびコンポーネントで使用する必要がある場合は、mapActions を使用することもできます。

(1)必要なコンポーネントに導入する

import { mapActions } from 'vuex';

(2) コンポーネントメソッドで使用

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

一般に、これらを使用する場合、ステータス値を取得するために従来の this.$store.state は必要ありません。また、this.$store.commit() や this.$store.dispatch() も必要ありません。これを使用して直接呼び出すことができます。

vuexのmapMutations、mapState、mapActionsの使用

おすすめ