Vuex使用

Vuex

//store文件夹中的auth.js
import * as types from './mutation-types';
import auth from '../apis/authCommon';

const DATA_TYPE_MAP = {
  org: {
    api: auth.getOrgs,
    mutation: types.SET_AUTH_ORGS,
  },
  member: {
    api: auth.getMembers,
    mutation: types.SET_AUTH_MEMBERS,
  },
};

export const state = () => ({
  orgs: [],// 组织机构信息
  members: [],// 当前权限下所有业务员
});
export const getters = {
  orgsOpts: state => [{
    title: '全部',
    value: '',
  }, ...state.orgs.map(org => ({
    title: org.orgName,
    value: org.orgId,
  }))],
  membersOpts: state => [{
    title: '全部',
    value: '',
  }, ...state.members.map(member => ({
    title: member.name,
    value: member.memberId,
  }))],
};

export const actions = {
  async setData ({ commit, state }, dataType) {
    let list = [];
    try {
      list = await (DATA_TYPE_MAP[dataType].api)();
    } catch (e) { }
    commit(DATA_TYPE_MAP[dataType].mutation, { list });
  },
};

export const mutations = {
  [types.SET_AUTH_ORGS] (state, { list }) {
    if (list) {
      state.orgs = list;
    }
  },
  [types.SET_AUTH_MEMBERS] (state, { list }) {
    if (list) {
      state.members = list;
    }
  },
};
//页面 Test.vue
mounted () {
    this.setData('type');
    this.setData('member');
 },
 computed: {
    ...mapGetters('auth', [
      'renewalUserTypesOpts',
      'membersOpts',
    ]),
    defeatList () {
      return this.$store.state.orderlist.defeatList.rows;
    },
    defeatReasons () {
      return this.$store.state.orderlist.defeatReasons;
    },
    total () {
      let totalNum = this.$store.state.orderlist.defeatList.total;
      if (totalNum) {
        this.paginationProps.total = totalNum;
      }
      return totalNum;
    }
  },
  methods: {
    ...mapActions('auth', ['setData',])
 }
 
 <a-select-option
	   v-for="type in renewalUserTypesOpts"
	  :value="type.value"
	  :key="type.value"
	>{{type.title}}</a-select-option>