《Vue应用开发》课件——7.2.4Vuex计数器案例.pptxVIP

要求使用Vuex实现计数器案例：计数器初始页面中定义2个初始数字0和100，定义“+”和“-”2个按钮。每次单击“+”按钮，数字从0自增1；每次单击“-”按钮，数字会从100自减1。7.2.4Vuex计数器案例

计数器初始页面效果如下图所示。7.2.4Vuex计数器案例

在计数器初始页面中单击“+”按钮，数字从0变为1，效果如下图所示。7.2.4Vuex计数器案例

7.2.4Vuex计数器案例在计数器初始页面中单击“-”按钮，数字从100变为99，效果如下图所示。

步骤1清空src\App.vue文件中的内容，重新编写如下代码。步骤3步骤4步骤2讲解计数器案例的实现7.2.4Vuex计数器案例

步骤1接上页代码步骤3步骤4步骤2讲解计数器案例的实现7.2.4Vuex计数器案例

创建src\store\index.js文件。步骤3步骤4步骤1步骤27.2.4Vuex计数器案例讲解计数器案例的实现

接上页代码步骤3步骤4步骤1步骤27.2.4Vuex计数器案例讲解计数器案例的实现

修改src\App.vue文件，提交increase()方法和decrease()方法。步骤3步骤4步骤1步骤27.2.4Vuex计数器案例讲解计数器案例的实现

在template模板中获取state中的数据并显示在页面中。步骤3步骤4步骤1步骤27.2.4Vuex计数器案例讲解计数器