用户登录

在这个 app-notification Store 模块里,添加一个获取器,名字叫 messages ,这个获取器提供的值就是这个模块里的 messages 这个数据的值。

然后再添加一个修改器,放在 muttations 里面,名字叫 addMessage,接收 state 参数,还有一个 data 参数。

设置一下 state.messages 这个数据的值,等于一个数组,数组里面先把 data 参数表示的值放进来,然后再把原本 的messages 数据放进来。

动作

在模块的动作里面,可以定义一个动作,放在 actions 里面,动作的名字叫 pushMessage,把 commit 从 context 参数里解构出来。再添加一个 data 参数。使用这个动作的时候要提供这个 data 参数的值。

在这个动作里先添加一个 id ,等于 Date.now(), 再声明一个 message,等于一个对象,里面先把 id 放进来,再把 data 里的内容放进来。

下面 commit 一个修改,名字叫 addMessage,把上面准备好的 message 这个数据交给这个 mutation。这个修改器会把这个提示信息对象放到这个 Store 模块的 messages 里面。

使用

再找个地方用一下这个动作推送要显示的通知提示信息,打开 app-home 这个组件,在组件的模板里添加一个 button ,按钮文字是 Push Message。 按钮上添加一个类,名字叫 button,在这个按钮上绑定 click 事件,处理器设置成 onClickPushMessageButton。

在 vuex 里面,导入需要的 mapActions。 然后在组件里添加一个 methods 选项, 把执行 mapActions 返回的结果放到这里,本地组件里方法的名字叫 pushMesasge,对应的是 notification 模块下面的 pushMessage 这个动作。

然后再定义按钮的事件处理器,名字叫 onClickPushMessageButton,在这个方法里可以执行一下组件里的 pushMessage 方法,提供一个对象参数,先设置一下 content 属性的值,这个值就是要显示的提示信息的内容。

可以再用 icon 设置一下需要的小图标,比如 cloud 。

AppNotification

下面还得再处理一下 AppNotification 组件,这里我们在这个组件里手工提供了 messages 数据,可以把这个数据从组件里删除掉。

然后在组件里导入一个 mapGetters,它来自 vuex。 在组件的 computed 里面,把执行 mapGetters 返回的结果放进来,本地组件里数据的名字叫 messages,对应的是 notification 模块里的 messages 这个 getter。

测试

再到浏览器上测试一下,点击 按钮,会显示一条通知提示信息。

推送通知提示信息(pushMessage)《 Vue.js 项目实践:消息提示 》

统计

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

社会化网络

关于

微信订阅号

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