Guest User

Untitled

a guest
Jan 19th, 2018
101
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 0.98 KB | None | 0 0
  1. state: {
  2. users: [{name: 'Oscar', age: 23}, {name: 'Jens', age: 23}, {name: 'Olof', age: 25}]
  3. }
  4.  
  5. // Vuex mutation
  6. // Vue uses dependency tracking via Object.defineProperty
  7. // so that components which are dependant on the state are automatically re-rendered.
  8. // No need for shouldComponentUpdate, immutability or full component vdom diffing
  9. incrementFirstAge(state) {
  10. // mutate state
  11. users[0].age++
  12. }
  13.  
  14. // Redux reducer
  15. // State has to be immutable for React & the default shouldComponentUpdate to trigger.
  16. // It is equally or more expensive the "Vue way" and hands more responsibility to the developer
  17. // which has been abstracted & taken care of in the Vue case.
  18. incrementFirstAge(state) {
  19. // create state
  20. return {
  21. users: [
  22. ...state.users,
  23. {
  24. ...state.users[0],
  25. age: state.users[0].age + 1
  26. }
  27. ]
  28. }
  29.  
  30. // alt. use something like Immutable but then it's still more "code" for the developer
  31. // to write and another, quite large, library to master.
  32. }
Add Comment
Please, Sign In to add comment