Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

单向数据流 #10

Open
FrankFang opened this issue Mar 2, 2017 · 17 comments
Open

单向数据流 #10

FrankFang opened this issue Mar 2, 2017 · 17 comments
Labels

Comments

@FrankFang
Copy link
Contributor

FrankFang commented Mar 2, 2017

简单来说,把一切双向绑定的语法都禁用,同时只在一个地方改动数据,那么留下来的就是单向数据流。

由于代码越来越琐碎,所以大家看 commit 要更加仔细了。

我会在 commit 下面的评论框 里写出主要思路。

  1. commit 使用 Vuex 思想重构
  2. commit 使所有字段都可以编辑
  3. commit 数据保存到 localStorage

至此,不管里怎么刷新页面,就跟刷新页面之前一样了。

接下来我们添加注册和登录。

commit 添加注册对话框

写完这一步,你要理解为什么点击「注册」按钮,就会弹出一个 Dialog,一定要看懂。

commit 使用 leancloud 注册

这是我们在 Todo List 里做过的事情,请看懂每一句话,我们的代码没有废话。

commit show errorMessage

一个真实的网页,应该对错误给出友好的提示!

commit 显示用户名和登出

commit 完成登出功能

commit 页面载入时获取已登录用户

commit 登录功能

commit 登录功能

commit 登录成功后关闭对话框、更新 store

commit show error message

致饥人谷学员

请看清楚每个 commit 里面代码的意思,你可以先抄,然后再改,但是你一定要思考每一句代码的意思,结合 Vuex 的文档,你都可以搞懂的。

完成上面代码,给出预览链接。

https://jirengu-inc.github.io/jrg-project-5/step-9-resumer/dist/#/

你们使用 LeanCloud 的 AV 对象时,可千万别用我的 app key 和 app id!

也就是不要抄我 commit 里面的 app key 和 app id ,请自己去 LeanCloud 申请应用!

疑问

如果有疑问,请在 QQ 群直接说。另外我计划周一和周三白天直播写这个应用的过程,有时间的可以来看~

重要 BUG

这个 BUG 每个使用 Vue 的人都会遇到,但他可能由于不理解 Object.defineProperty 的用法,无法「独立解决」这个 BUG。

BUG 的解决见

commit: 修复一个 BUG

绝对绝对绝对不能让 data 中的对象的任何一个属性值变为 undefined 或者 null, 原因见 https://cn.vuejs.org/v2/guide/reactivity.html

@hungryYang
Copy link

page
code

@raszxcv
Copy link

raszxcv commented Mar 4, 2017

预览
源码

@code-zhangrui
Copy link

预览
代码

@FrankFang
Copy link
Contributor Author

@code-zhangrui 我点你的预览,怎么连注册按钮都看不见~

@zhangjiuyi
Copy link

预览
代码

@code-zhangrui
Copy link

code-zhangrui commented Mar 8, 2017 via email

@starlikerain
Copy link

starlikerain commented Mar 8, 2017

doge~

Source code
Preview

谢谢方方 ,记住data不能以任何形式消失的原则了 . object.defineproperty的特性

@FrankFang
Copy link
Contributor Author

@starlikerain 你的 user 变量被消除了 id 和 username 属性,导致 Vue.js 无法监听 user 的变化。
这个 bug 的解决见 f4d536a

@muxi7
Copy link

muxi7 commented Mar 11, 2017

预览

代码

ZW

@baixiaoji
Copy link

预览
代码


还是需要看几遍文档,做的时间隔久了就容易忘掉之前看的文档内容

@LisaLi85
Copy link

代码
预览

@Honohonoho
Copy link

代码
预览
有个小bug,登录、注册、登出后,topbar不会自动更新 "你好{{username}}",除非刷新页面,学到后面希望自己可以解决..

@boloog
Copy link

boloog commented Jun 18, 2017

源码
预览

@andreaxiang
Copy link

预览demo

@1-WEEK
Copy link

1-WEEK commented Sep 17, 2017

预览

@clementlxd
Copy link

@Alfred-ZF
Copy link

预览
代码链接

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests