用户登录

现在虽然我们在本地存储里面记录了一下当前用户设置的主题,但是刷新页面以后,页面仍然会使用默认的亮色主题。下面再去解决一下个问题。

回到项目,打开 app-layout 组件,在这个组件里面,从 vuex 里可以导入一个 mapMutations 。 然后找到组件的 methods,把执行 mapMutations 返回的结果放在这里。 本地叫 setTheme,对应的是 layout 模块里的 setTheme。

这个组件被创建以后我们可以从本地存储那里得到 theme 这个数据的值,然后用这个 setTheme 设置一下当前主题。

在 created 这个生命周期方法里面,添加一个 theme, 用一下 getStorage ,从本地存储里提取 theme 这个数据。 下面可以判断一下,如果 theme 有值,就执行一下组件里的 setTheme,把 theme 交给这个方法。

这个 setTheme 设置的就是 layout 这个 Store 模块里的那个 theme 数据的值。 这里用的 getStorage 是之前我们在 app.service 里定义的一个函数。

回到浏览器预览一下,刷新一下页面,这回应用仍然会使用当前的暗色主题。因为 app-layout 组件被创建以后,它会提取存储在浏览器本地存储里的 theme 这个数据的值,然后再用 setTheme 去设置应用当前的主题。

创建应用布局组件时设置主题《 Vue.js 项目实践:应用主题 》

统计

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

社会化网络

关于

微信订阅号

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