今天写后台管理系统时，遇到一个需求，是关于内外贸选项的切换。

效果图如下：

默认是内贸选项，当进行切换时，无论是在哪个页面，当前页面都要进行刷新，并将选项的参数传递到接口中。

下面详细介绍操作步骤：

1.AdminHeader.vue组件添加内外贸选项的切换

1.1 template中的相关代码如下：

 <a-dropdown class="lang header-item">
  <div>
    <a-icon type="pic-left" /> {{ type == 1 ? '内贸' : '外贸' }}
  </div>
  <a-menu
    @click="(val) => setType(val.key)"
    :selected-keys="[type]"
    slot="overlay"
  >
    <a-menu-item v-for="type in dataTypeList" :key="type.value">{{
      type.label
    }}</a-menu-item>
  </a-menu>
</a-dropdown>

1.2 data中添加dataTypeList参数

data(){
	return{
		dataTypeList: [
	        { value: '1', label: '内贸' },
	        { value: '2', label: '外贸' },
	      ],
	}
}

1.3 从vuex中引入mapState和mapMutations

import { mapState, mapMutations } from 'vuex';

1.4 在computed中获取mapState中的type，从mapMutations中获取setType方法

computed: {
    ...mapState('setting', [
      'type',
    ]),
},
methods: {
	...mapMutations('setting', ['setType']),
}

2.store/modules/setting.js文件中添加type参数和setType方法

state:{
	type: '1',
},
mutations: {
	setType(state, type) {
      state.type = type;
    },
}

3.App.vue文件中添加以下的刷新代码

3.1 template中的代码如下：

<template>
  <a-config-provider :locale="locale" :get-popup-container="popContainer">
    <router-view v-if="isRouterAlive" />
  </a-config-provider>
</template>

3.2 data中的参数

data() {
  return {
    isRouterAlive: true,
  };
},

3.3 从vuex中引入mapState和mapMutations

import { mapState, mapMutations } from 'vuex';

3.4 在computed中获取mapState中的type，从mapMutations中获取setType方法

computed: {
    ...mapState('setting', [
      'type',
    ]),
},
methods: {
	...mapMutations('setting', ['setType']),
}

3.5 watch中监听type

watch: {
    type(newVal) {
      console.log('type改变了', newVal);
      this.reload();
    },
}

3.6 methods中添加刷新当前页面的方法

reload() {
  this.isRouterAlive = false;
  console.log('刷新当前页面了');
  this.$nextTick(() => {
    this.isRouterAlive = true;
  });
},

4.监听路由参数的变化，从而更改type的值

 watch: {
    $route() {
      console.log('route', this.$route.query);
      if(this.$route.query&&this.$route.query.dataType){
        this.setType(this.$route.query.dataType)//将路由中的参数设置到vuex中，调用接口的时候可以从vuex中获取
      }
      //this.setHtmlTitle(); 这个是设置标题啥的，此处无用
    },
 }

5.接口js文件中添加入参

import store from '../../store';//相对路径根据具体的来
console.log(store.state.setting.type);此时就可以拿到vuex中的参数了，然后调用接口的时候统一添加此参数即可。

完成！！！多多积累，多多收获！