用户登录

在应用的组件里面可以指派要执行的动作 .. 就是 Action .. 在动作里面可以提交修改,也就是 commit mutation .. Action 可以是异步的, mutation 只能是同步的 ..

在 demo 这个 store 里面,导出一个 actions .. 它是一个对象 .. 里面可以添加一些动作 .. 每个动作都是一个方法 .. 比如添加一个 addAction .. 它接收一个 context 参数 .. 还有一个 payload ,可以叫它 number ..

context 里面有个 commit 方法可以提交修改 .. 用一下 context.commit .. 提交的修改是 add .. 再把 number 这个 payload 交给 commit 方法,这样在 add 这个 mutation 里面可以得到它的值 ..

在组件里面使用 action 可以这样 .. 先在 methods 里面,添加一个方法 .. 名字可以是 addAction ,这个方法的名字可以跟 action 的名字一样,也可以不一样 ..

方法里面用一下 this.$store 上的 dispatch ,指派一个动作 .. 动作是 demo/addAction .. 给它的 payload 是数字 3 ..

在组件视图里面用一下 addAction 方法 .. 回到浏览器 .. 可以试一下 .. 按一下小标签 .. 每按一次,标签上的数字都会增加 3 ..

动作里面可以包含异步的动作 .. 我们可以使用一个简单的 setTimeout 模拟一下 .. 在这个 addAction 动作里面 .. 用一个 setTimeout ... 等待时间是 1000 毫秒 .. 就是 1 秒钟的时间 .. 1 秒以后,要执行的就是提交一个 add 修改 ..

再试一下 .. 按一下小标签 .. 执行了组件里的 addAction 方法 .. 这个方法里指派了一个 demo/addAction 动作 .. 带的 payload 是数字 3 ..

addAction 这个动作会等待 1 秒钟 .. 然后才会 commit 一个 add 修改 .. 这个 add 修改的是 store 里的 count 这个 state .. 它会让 count 的值加上修改里的 payload 的值 ..

Vuex:指派 Actions《 Nuxt.js:数据管理 》

统计

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

社会化网络

关于

微信订阅号

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