用户登录

使用 mapMutations 这个帮手方法可以把 store 里的 mutation 映射成组件里的一个方法。比如在这个 App 组件里面,之前我们使用了 store 上的 commit 方法,commit 了一个叫 setName 的 mutation。

这里可以在组件里,从 vuex 里面,导入 mapMutations 这个帮手方法。然后在组件的 methods 属性里面,用一个展开操作符,把执行 mapMutations 返回的东西放进来。如果你想让方法的名字跟 mutation 的名字保持一致,可以给它提供一个数组参数,如果想修改方法的名字,可以给它提供一个对象参数,然后分别设置一下你想要的方法的名字,还有对应的 mutation。

这里给它提供一个数组,里面添加一个 setName,这样在这个组件里就可以直接使用 setName 这个方法来修改 store 里的那个 name 数据了。

把这行换成 this.setName,给这个方法的参数值设置成 NINGHAO 。下面这行也可以换成 this.setName,给它的参数值设置成 宁皓网。

再回到浏览器测试一下,点一下标题,会修改 Store 里的 name 数据。

mapMutations《 Vue.js 前端应用 #6:数据管理 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点