Javascript 用一种方法使用多个计数器

我试图尽可能地减少我的实践应用程序，如何更改我的方法以允许多个计数器使用一个状态变量，但在增加或减少计数器时不更改每个计数器

<template>
  <h1>Test Counter</h1>
  <div class="container">
    <div class="item">
      <div class="itemName">Item 1</div>
      <button @click="decreaseCount">Decrease</button>
      <div class="value">{{ count }}</div>
      <button @click="increaseCount">Increase</button>
    </div>
    <div class="item">
      <div class="itemName">Item 2</div>
      <button @click="decreaseCount">Decrease</button>
      <div class="value">{{ count }}</div>
      <button @click="increaseCount">Increase</button>
    </div>
  </div>
</template>

测试计数器
项目1
减少
{{count}}
增加
项目2
减少
{{count}}
增加

导出默认值{
名称：“应用程序”，
数据（）{
返回{
计数：0，
};
},
方法：{
递增计数（）{
这是1.count+=1；
},
递减计数（）{
这是1.count-=1；
},
},
};

我这里有一个非常基本的工作示例，我在应用程序中留下了问题-

我尝试将状态重命名为它自己的变量，这样每个计数器都有自己的状态，但当我更改后，计数器将不会增加或减少，请检查此项

<template>
  <h1>Test Counter</h1>
  <div class="container">
    <div class="item">
      <div class="itemName">Item 1</div>
      <button @click="decreaseCount('counterOne')">Decrease</button>
      <div class="value">{{ counterOne }}</div>
      <button @click="increaseCount('counterOne')">Increase</button>
    </div>
    <div class="item">
      <div class="itemName">Item 2</div>
      <button @click="decreaseCount('counterTwo">Decrease</button>
      <div class="value">{{ counterTwo }}</div>
      <button @click="increaseCount('counterTwo')">Increase</button>
    </div>
  </div>
</template>

测试计数器
项目1
减少
{{counterOne}}
增加
项目2
减少
{{counterTwo}}
增加

导出默认值{
名称：“应用程序”，
数据（）{
返回{
对方:0,，
二比零
};
},
方法：{
递增计数（val）{
这个[val]+=1；
},
递减计数（val）{
这个[val]=1；
},
},
};

另一种方式

<template>
  <h1>Test Counter</h1>
  <div class="container">
    <div class="item" v-for="(item, index) in items" :key="index">
      <div class="itemName">{{item.name}}</div>
      <button @click="decreaseCount(index)">Decrease</button>
      <div class="value">{{ item.counter }}</div>
      <button @click="increaseCount(index)">Increase</button>
    </div>
  </div>
</template>

测试计数器
{{item.name}
减少
{{item.counter}}
增加

导出默认值{
名称：“应用程序”，
数据（）{
返回{
项目：[
{name:'Item 1'，计数器：0}，
{name:'Item 1'，计数器：0}，
....... 
]
};
},
方法：{
递增计数（val）{
此.items[val].计数器+=1；
},
递减计数（val）{
此.items[val].计数器-=1；
},
},
};

这是可行的，但我现在基本上只使用两个不同的状态变量，最终会有20多个不同的计数器，所以这是使用counterOne最有效的方法吗。。。Counter20…我需要知道一件事..你要通过使用v-for迭代div来显示项目吗？不，每个项目对于它自己的组件都是唯一的，但是每个组件都将使用来自父级的相同计数器方法请检查我编辑的答案…如果这不是您的实现方式，那么前者是唯一的方式如果这有助于@ShrewdStyle，请进行投票

<script>
export default {
  name: "App",
  data() {
    return {
      counterOne: 0,
      counterTwo: 0
    };
  },
  methods: {
    increaseCount(val) {
      this[val] += 1;
    },
    decreaseCount(val) {
      this[val] -= 1;
    },
  },
};
</script>

<template>
  <h1>Test Counter</h1>
  <div class="container">
    <div class="item" v-for="(item, index) in items" :key="index">
      <div class="itemName">{{item.name}}</div>
      <button @click="decreaseCount(index)">Decrease</button>
      <div class="value">{{ item.counter }}</div>
      <button @click="increaseCount(index)">Increase</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      Items: [
       { name: 'Item 1',  counter: 0 },
       { name: 'Item 1',  counter: 0 },
        ....... 
      ]
    };
  },
  methods: {
    increaseCount(val) {
      this.items[val].counter += 1;
    },
    decreaseCount(val) {
      this.items[val].counter -= 1;
    },
  },
};
</script>