Quasar CLI 框架 Vuex 入门教程(2018年)

发布网友发布时间：2024-10-01 02:14

共1个回答

热心网友时间：2024-11-23 12:17

在启动Quasar CLI框架后，引入Vue全家桶中的Vuex以实现状态管理变得至关重要。本文将逐步引导初学者在Quasar环境中正确运用Vuex。

下图展示的是新鲜出炉的Quasar CLI框架中Vuex的目录结构，接下来将对此进行优化。

在`state.js`中，首先定义一个变量属性并赋予初始值。

接着，在`getters.js`中编写提取`count`变量值的逻辑。

随后，在`mutations.js`中编写修改`count`变量的方法。

在`actions.js`中，调用`mutations.js`中的`SET_COUNT`方法。

之后，便可在页面中进行`count`状态值的修改与提取。

打开`src/pages/index.vue`文件，对原始内容进行修改。

定义一个按钮和一个h5标签后，页面呈现如下修改。

运行后，控制台报错提示`[vuex] unknown getter: getCount`和`[vuex] unknown action type: setCount`。这意味着Vuex未能识别`getCount`方法和`setCount`方法。

定位至`src/store/index.js`，修改配置内容。

返回页面查看效果，点击按钮，数字增加，至此，实现成功。