vue和el-button一起使用

我写了一个叫做植被的按钮，点击按钮可以显示WMS的地图服务
效果如下图

对应的代码如下,el-button以及WMSservice的方法

<el-button type="primary" class="btn" value="植被" size="mini" @click="WMSservice">植被</el-button>

WMSservice(){
      this.map = amapManager.getMap();
      var wms = new AMap.TileLayer.WMS({
        url: "https://ahocevar.com/geoserver/wms",
        blend: false,
        tileSize: 512,
        params: {
          LAYERS: "topp:states",
          VERSION: "1.3.0",
        },
      });
       //console.log(wms.url);
       wms.setMap(this.map);
}

问题：如何在第二次点击该按钮时将此wms服务取消（地图上消失，再次点击再次出现），每两次点击一个循环

给地图服务一个是否显示的标志，v-show控制

声明个变量，标记这个服务是否显示中，然后调用wms的api进行显隐

例如：
data() {return { isWmsShow:false }}
fuc() {
this.isWmsShow:false = !isWmsShow:false
isWmsShow?wms.show():wms.hide()
}

具体这个api是不是这么用，你试一下5

基于问题，给与建议
需求：第一次点击显示wms服务，第二次点击wms关闭
思路：

1. 设置计数器，当大于1的时候 就关闭wms服务

实现代码：
let globalIndex = 0; // 设置计数器
WMSservice(){
var wms = null;
if (globalIndex++ < 1) {
this.map = amapManager.getMap();
wms = new AMap.TileLayer.WMS({
url: "https://ahocevar.com/geoserver/wms",
blend: false,
tileSize: 512,
params: {
LAYERS: "topp:states",
VERSION: "1.3.0",
},
});
//console.log(wms.url);
wms.setMap(this.map);
} else {
wms.setMap(null); // 第二次的时候关闭wms服务
}
}