应用的 Actions 与 Mutations

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

要修改应用里的数据,可以触发执行 Action,就是动作,在动作里可以提交 Mutation .. 然后通过 Mutation 去修改对应的数据 ..

比如现在我们的应用在创建以后需要一些初始数据 .. 这些数据可以从数据库里面查询出来 .. 我们可以先去定义一个 Mutation,让它可以去查询数据库,把得到的结果交给应用的 State .. 再定义一个动作可以提交这个 Mutation .. 然后在应用的组件里面,我们可以使用定义的这个动作 ..

Mutations

先打开 store 下面的 mutations.js, export 一个默认的对象 .. 它里面就是在应用里定义的 mutations .. 这里我们添加一个 setInitialData ,接收一个 state 参数 ..

在这个 mutation 里面我们可以从数据库里查询出需要的数据,然后把它们交给 state 里的 entities ..

先导入一个东西 .. 添加一个 loadCollection .. 来自我们定义的 database ..

然后打开我们之前创建的 vue 应用的 app.js .. 在它的 Notes 组件的 created 方法里,复制一下这块代码 ..

粘贴到我们定义的这个 setInitialData 这个 mutation 里面 ..

它做的事就是得到数据库的 notes 集合,查询出集合里的数据,排下顺序,交给 _entities ..

这里再修改一下,把 this 换成 state .. 把查询出来的数据,交给应用的 state 里的 entities ..

Actions

再去定义一个动作 .. 打开 actions.js .. export 一个动作 .. 名字是 initial .. 第一个参数是个对象 .. 我们可以把 commit 拿出来用 ..

在这个动作方法里, 用一下这个 commit 去提交一个 Mutation,就是修改 .. mutation 的名字就是刚才我们定义的 setInitialData

应用动作

有了动作,我们可以在组件里,找个地方去用一下 .. 打开 Notes.vue .. 先把 mapActions 这个帮手方法从 vuex 里面拿出来 ..

然后在组件里添加一个 methods 属性 .. spread 一下 mapActions .. 把 initial 这个动作拿出来,放到组件的 methods 里面 ... 这样我们就可以在组件里使用这个方法了 ..

在组件里,再添加一个 created 生命周期方法 .. 里面调用一下 this.initial() .. 这样实例创建以后就会使用这个 initial 方法,它会提交一个 setInitialData 这个修改 .. 这个 Mutation 做的事就是去到数据库里查询出需要的数据,然后交给 state 里的 entities ..

打开 state.js .. 把之前添加到 entities 里的东西去掉 ..

现在页面上显示的东西就是数据库里的 notes 集合里面的数据 .. 现在里面应该还没有数据 ..

演示数据

我们可以先手工插入两个文档 ..

打开 mutations.js .. 在 setInitialData 里面用的这个 loadCollection 的 then 方法里面 .. 可以用一下得到的这个 collection 的 insert ,去插入两个文档 ... 一个数组,里面放两个文档 .. 上面再从 database 里面,把 db 拿出来 ..

这里再用一下 db 的 saveDatabase 保存一下数据库 ..

保存一下文件 .. 然后再把这段代码注释掉 ... 去掉上面这个 db ...

现在页面上会显示两个存储在数据库里的笔记项目 ..

应用的 Actions 与 Mutations《 Vue.js:应用案例(Vuex) 》

统计

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

社会化网络

关于

微信订阅号

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