vue之vuex的模塊導入

/* vuex模塊文件(form.js) */

import router from "../../router";
import request from "../../utils/request";

const state = {
  step: {
    payAccount: "123456"
  }
};

const actions = {
  async submitStepForm({ commit }, { payload }) {
    await request({
      url: "/api/form",
      method: "POST",
      data: payload
    });
    commit("saveStepFormDate", payload);
    router.push("/form/step-form/result");
  }
};

const mutations = {
  saveStepFormDate(state, { payload }) {
    state.step = { ...state.step, ...payload };
  }
};

export default {
  namespaced: true, //解決命名衝突(使用時需要備註模塊名)
  state,
  actions,
  mutations
};

注:不同模塊注入時,會出現命名衝突問題,所以在導出模塊時,要給導出對象添加 namespaced: true 屬性,給每個模塊標註了一個命名空間,在使用時需要加上所屬模塊名

/* 模塊導入store (index.js) */

import Vue from "vue";
import Vuex from "vuex";
import form from "./modules/form";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {},
  modules: { //模塊導入
    form
  }
});

/* vuex使用 */
<template>
  <a-form :form="form">
    <a-form-item
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
      label="付款賬號"
    >
      <a-input
        v-decorator="[
          'payAccount',
          {
            initialValue: step.payAccount,
            rules: [{ required: true, message: '請輸入付款賬號' }]
          }
        ]"
        placeholder="請輸入付款賬號"
      />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" @click="handleSubmit">
        下一步
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      formItemLayout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 }
      },
      form: this.$form.createForm(this)
    };
  },
  computed: {
    step() {
      return this.$store.state.form.step;
    }
  },
  methods: {
    handleSubmit() {
      const { form, $router, $store } = this;
      form.validateFields((err, val) => {
        if (!err) {
          $store.commit({
            type: "form/saveStepFormDate",//指定對應命名空間
            payload: val
          });
          $router.push("/form/step-form/confirm");
        }
      });
    }
  }
};
</script>

注:調用 mutations 中的 saveStepFormDate方法:
–>要喚醒一個 mutation handler，你需要以相應的 type 調用 store.commit 方法，模塊中需要制定對應的模塊(空間名下的方法)
–>Action 通過 store.dispatch 方法觸發