Vue 计算器构建实例（input 组件）
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 中执行的, 这里会抛出一个错误。
但是，这个双向绑定在处理大量表单这种业务上是非常好用的，难道要直接舍掉么？当然不会~
看代码先：
import {updateCounter} from '../vuex/actions'
import {getCount} from '../vuex/getters'
export default {
vuex: {
getters: {
counterValue: getCount
},
actions: {
update: updateCounter
}
},
computed: {
thisMessage: {
get () {
return this.counterValue
},
set (val) {
this.update(val)
}
}
}
}
以上就是一个包含 input 的表单组件，可以看到 v-model 和 debounce 这些指令都是正常书写的，秘诀就是v-model 绑定了一个计算属性，通过计算属性的 getter 和 setter 函数触发 Vuex 的 getters 和 actions 函数，从而避免直接修改state。
这样也比绑定一个属性上去再监听变化少了一步，重要的是 v-model 这样的指令可以继续完美的使用了~
关键字：vue.js, vuex, 前端, 前端开发
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！