vuex计数器案例

Vuex安装、配置完成后，下面演示如何使用Vuex实现计数器案例。计数器初始页面效果如图7-5所示。
在计数器页面中单击“+”按钮，其后数字从0变为1，效果如图7-6所示。在计数器页面中单击“-”按钮，其后数字从100变为99，效果如图7-7所示。
下面通过实际操作的方式讲解计数器案例的实现。
10清空src\App.vue文件中的内容，重新编写如下代码。
 

1<template>
2 <p>
3 每次增加1:<button @click="increment">+</button>
4 数字：0
初始页面 5 </p>
6 <p>
7 每次减少1: <button eclick="reduction">-</button>
8 数字：100
。 9 </p>
10</template>
11<script setup>
12 const increment= () => ( }
13 const reduction = () => ( )
14</script>
15<style>
16button l
17 background-color: aquamarine;
18}
19</style>

在上述代码中，第3行代码使用<button>标签定义“+”按钮；第4行代码设置“+”按钮后的数字的初始值为0；第7行代码使用<button>标签定义“-”按钮；第8行代码置“-”按钮后的数字的初始值为100。需要注意的是，为了展示页面效果，这里的初始值先设置为静态值，后期会修改为动态值。