Vuex 计算器构建实例（input 组件）

lushan 发布于2019-08-19 18:41 / 2799人阅读

摘要：计算器构建实例最近想熟悉一下这个状态管理的神器，写了一下尤大大的小，文档中说增加一个表单组件和之前的按钮比起来相对棘手，这里把遇到的小问题记录一下。组件再从的函数中获得组件需要的数据，最终渲染到组件完成更新。

Vuex 计算器构建实例

最近想熟悉一下这个状态管理的神器，写了一下尤大大的小 demo，文档中说增加一个表单组件和之前的按钮比起来相对棘手，这里把遇到的小问题记录一下。

如果对你有帮助的话,欢迎 star~

我的github ^_^

安装

环境还是使用官方的 vue-cli 脚手架进行搭建，废话不多说。

//    克隆这个项目后输入以下命令进入开发模式
npm install
npm run dev

Vuex数据流

Action决定了对 store 做出什么样的修改，比如说通过 dispatch 一个 INCREMENT 的 mutation 进行增加 state.count 值。

mutation 函数是来详细描述修改 store 的过程。

组件再从 store 的 Getter 函数中获得组件需要的数据，最终渲染到组件完成更新。

整个过程清晰明了，单向的数据流动和 redux 的理念十分相似。

官网上有 increment 的教程，相对简单些，这些就略去不谈，说说教程上没有的~

表单组件

教程上说，直接在属于 Vuex 的 state 上使用 v-model 会比较恶心：

假设这里的 obj 是在计算属性中返回的一个属于 Vuex store 的对象，在用户输入时，v-model 会试图直接修改 obj.message。在严格模式中，由于这个修改不是在 mutation handler 中执行的, 这里会抛出一个错误。

但是，这个双向绑定在处理大量表单这种业务上是非常好用的，难道要直接舍掉么？当然不会~

看代码先：

以上就是一个包含 input 的表单组件，可以看到 v-model 和 debounce 这些指令都是正常书写的，秘诀就是v-model 绑定了一个计算属性，通过计算属性的 getter 和 setter 函数触发 Vuex 的 getters 和 actions 函数，从而避免直接修改state。

这样也比绑定一个属性上去再监听变化少了一步，重要的是 v-model 这样的指令可以继续完美的使用了~

云服务器 GPU云服务器组件实例 vuejs组件开发实例构建云计算平台存储计算分离-计算组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79866.html

Vue面试中，经常会被问到的面试题/知识点(2019改进版)

摘要：在第一版的基础上进行了优化，新增一些面试题知识点，对一些知识点进行更加深入的描述。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。改变中的状态的唯一途径就是显式地提交。这两个可以在不进行刷新的情况下，操作浏览器的历史纪录。在第一版的基础上进行了优化，新增一些面试题/知识点，对一些知识点进行更加深入的描述。一、对于MVVM的理解？ MVVM 是 Model-View-Vie...

singerye 2019-08-26 11:00 评论0 收藏0
Vue学习日记（四）——Vue状态管理vuex

摘要：说实在话，我在阅读文档的时候，也很难以去理解，甚至觉得没有使用它我也可以。介绍那么到底是什么引用官网的说法就是是一个专为应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。前言先说句前话，如果不是接触大型项目，不需要有多个子页面，不使用vuex也是完全可以的。说实在话，我在阅读vuex文档的时候，也很难以去理解v...

fai1017 2019-08-30 13:53 评论0 收藏0
Vue学习日记（四）——Vue状态管理vuex

摘要：说实在话，我在阅读文档的时候，也很难以去理解，甚至觉得没有使用它我也可以。介绍那么到底是什么引用官网的说法就是是一个专为应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。前言先说句前话，如果不是接触大型项目，不需要有多个子页面，不使用vuex也是完全可以的。说实在话，我在阅读vuex文档的时候，也很难以去理解v...

zilu 2019-08-26 11:35 评论0 收藏0
Vue学习日记（四）——Vue状态管理vuex

摘要：说实在话，我在阅读文档的时候，也很难以去理解，甚至觉得没有使用它我也可以。介绍那么到底是什么引用官网的说法就是是一个专为应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。前言先说句前话，如果不是接触大型项目，不需要有多个子页面，不使用vuex也是完全可以的。说实在话，我在阅读vuex文档的时候，也很难以去理解v...

fjcgreat 2019-08-01 18:30 评论0 收藏0
FE.SRC-Vue实战与原理笔记

摘要：超出此时间则渲染错误组件。元素节点总共有种类型，为表示是普通元素，为表示是表达式，为表示是纯文本。实战 - 插件 form-validate {{ error }} ...

wangjuntytl 2019-08-26 13:54 评论0 收藏0