packtpublishing / learning-vuejs-2 Goto Github PK

Just a note to anyone following the book, Chapter 5.

According to this file :

Learning-Vuejs-2/chapter5/pomodoro/package.json

This sample is using Vue JS v1, and already has the components and vuex stuff (I assume specific for that version). There are also some differences in how the getters are defined for CountdownComponent.vue based in the book.

Code sample

  import { getMinutes, getSeconds } from '../vuex/getters'

  export default {
    vuex: {
      getters: {
        min: getMinutes,
        sec: getSeconds
      }
    }
  }

Book

import { mapGetters } from 'vuex'

export default {
  computed: mapGetters({
    min: 'getMinutes',
    sec: 'getSeconds'
  })
}

As a result, students cannot follow through (from scratch) with the chapter's exercise if taking the source code from Learning-Vuejs-2/chapter5/pomodoro.

Just to highlight that the chapter6/pomodoro had jade templates and is using VueJS v1, not really a good starting point for plugin development.

Can you kindly help us out and let us have a good starting point to continue the chapter please thank you.

alternative source code: https://flems.io/#0=N4Igxg9gdgzhA2BTEAucD4EMAONEBMQAaEGMAJw1QG0AGI2gXRIDMBLJGG0KTAW2RoAdAAsALn3jF0UMYlmoQAHgCEAWjUACJfjYA3TW3wBeADogc2c5rBYYMMzLGY2UROXMA+U1E3aRAEyewMCaYmxiSJoAvtFKAPSB3r7auga2mPaOrtgArmJqAOaUuVYgyX5+Sjn5mnpqfBD4iPCObgDuAJJyfNYAAgDWiACepULycuSOmPj43Yi9IJrYWGCIIgjNU+Yz+JowG9jYroWa8GwwYoY91mLD2IiOcgAeYuY+lZ+fGVnmLBDkPhqSCySjwLwfbQwbCYXw-BzmGoFYoQUpqABGYigEJSVXR+TE0E0fVsbDAA2ms3mixsdgRIExvkZamaLEwuXgbyWdwejnxYkJ2PKAEFZioEvzBRVtPFobDpQk0gqOdKquc6mp-tsQBEFoZfLq+DBrCh4Y5QgBycgLCB6AgWlDXBZCMAiRDkggxHFfVL6WmZemu90DdEQZ7en3aLDolqqyPVKB5K48x7mIPk0Phpb1RrNVqInout0e-BeTQhJ18IQvK6xSE+hLR2P1yqK-RxxtsBXxFWQnR+s1-CAQSYRqoicjxDsLTwAYREsMKiDCbrCESiEBYmmGqPI+0Oxygp3Ol00butCRnLYTSY1uZaT3XiHMU778SVPjbek8mg0yU-6haLsmgdJWYQLCsmByL+ajJEoPSQdBRiUvgaiGmoCFYHIY79ukdLZIm+RFCUZRxtoSLEkMozYOMsjuCh1LWDmTQPuYHSMSALZfJBawbPAWwofuEBHCcZwXFchq3PcqYgDW7y4j6g4gFqQIgmIYIvmRShynC+GIoRyIkRiWJjl8SiSkSJLnOSDE3EsSmMpozKsuynJSby5gWUKZGRqK+AqFxVTxF5WmyjCUDdh+UAJJhUGIP+0WAWJp6GuBfCIcuf6frFSEmAWCwYRBWHPuU17qqaekgMAVo2na+AWpojqGkWwYENEplVGk-q-OAxYhmGHVmU28A+ZG5EGWE0mOOm-VZneLH5jqhYzQQmnlsAzU1nWCkNvEw0+V+HZ7V2n7xDl8U+ABGiVjAyXJkVcUwXB52GHlS0LDAhXpcVEZKL2CnVD0wIQOl0ATBqWrZD0+o3SahpQwspkJOhkCg24sjdv9MUPXICWqNdrqLsu4SRMTT5PdlOPLshaYLkeiAYU+X0ZUjUUNjO85EyuZOk5om7bruQkiUed1nu4iCXnwB0UfU6KuPgKB6Jg8C5DJSsqyVGrQCgSKONAnQGZpb5Rdj31xXjXU0xYRzWEpakuG4HilSkShJCEJNILECRJH2uxoUDqPYGDGMJH7KMg0H6NiAqhqfYHwdXDrPT0rHXjI8nwNoxMCpdUp-wju4SMTq+AOE-TjOk5nkfZwkZdLhXSBVwnkXtqdSrSHgSBgOE0BcGgADsAQoAE-cgNERA8PwgggEIABWXAkGpEyKEre74FBmCaMY5aQrHjrUKENaOhaABCsLnzAFpEDYfUEI66mqzE1+H4grzH8KRycFfN+tQrmhsvAPAMRmCQg9ogY+ABZYYmgADKB5RIABlxIWh8NEAA3D4eI8RgKpXjlHHwAA1VWLoI4JwABQWjDgHUhUdv7ABbOdY+ABiKhBVzpXxbOvZwjoWC5CgN3NgRIyEAEod47UqNaMQuRyC+HoeIn07EejHxQfIr0Clx4tgEGIDY+BbqOjkT6XY1JGr-z4QI6AIiDGRiwTYXuCBEBCHgBAQoZDtEXGEYFPwNiQRwCQI45xriRAXCEIohYHjVFsBYIE4JoSqzqTYHwERoirFjS4ZgIQschB5AOGQlJY1wKvBMW4mAITEBdELPExJwiiCeK+CtPYPDlZ4FqX4aI4SxrtXEZ0z4nS2kYKgFg3BNCJiEOIXgiYFDw5Z1kHQ0BVNmHoXYTUlI2BKC4H3haQ0FpGCoOEf0wZydbHTLeFAIhDjxmyEmRnC5YhZkpEYZoC0TDY7M2KhwlZayYAbNjts3Z+z4h1x5lEG5ozznDMuRaQFDcGY3LuX4B5TyoVgNeXFd5fhVnCS+ZoagFp1aq22csvwWidFYryfrAyPCzE918GQxAdpZDJMCsUoQAASBYERJkGW-nSiY1ZMDkCXGIIQeLEDtK+N4uxfinEuOZWyvgEQxWfDSdWcm28eWyD5QKxAQqRUtm6Wovpl0oCgTObkyELRmGWDRZoNJjo0nLL6R3Fo7pqV9xAAAFgAMwoE9aPcek8BCKBdPYaQS8FDCHtq4dwYi-DtCMNox07raAAFJ+lEv5YUVwjoAi0GwM8TQ7JCSaFzfmwtEB+mdJ8EIa0jQ6oxtsU48gjpiiYGGBWo11baqeh0vWmsLJ3QAigoIqAjpzhuAwhOVEhQRDtuxFADkYl60ngKJcYYjcUyOigGDWdPgF3qh7VYvgGbXBqCQCwMQjoACsead1QCEPnSY9b-iyDUDANgAAvcBxahD9wWGmzQR6BUnsJNgRNtA9AztQU6rurrFDupQLQMezAQBjoGH3A+IBeCBrQKGEclxyA4CEPKu9YAQ0kGkVINA4gxDrKwUe54YB8B3tw2IfDOBGMkZBsFYcrH1I4HiJ6oQgmABsAL7Dcbw3xmixHg0L1ktJRQq6kDQZdcOt1l6UDuvdWPCemGp4r2IfPaQFHFDUdowCpj88XRONyPgFgWBrQkL4Ng2emBnjHXRDAeIehVbxAAIxCFoEIAI7rvOGbkymRTFA2DYDEEhkgWHp4HGEoeQop7xJNzHkAA

mutations.js --> "Stop button" in this sample should have this line added

clearInterval(state.interval)

Currently clicking on this button doesn't stop the timer.

Let's create a simple actions file for our change, message example. But before that, let's create one more item for the store's initial state, counter, and initialize it with a "0" value. So, our store will look like the following:

//store.js 
import Vue from 'vue' 
import Vuex from 'vuex' 
import { CHANGE_MSG, INCREMENT_COUNTER } from './mutation_types' 

Vue.use(Vuex) 

const state = { 
 message: 'Hello Vue!', 
 counter: 0 
} 

const mutations = { 
 [CHANGE_MSG](state, msg) { 
   state.message = msg 
 }, 
 [INCREMENT_COUNTER](state) { 
   state.counter ++; 
 } 
} 

export default new Vuex.Store({ 
 state, 
 mutations 
}) 

Actually it should be as follow, the code hosts on Github.com is correct.

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters' //should add 
import actions from './actions' //shoud add
import { CHANGE_MSG, INCREMENT_COUNTER } from './mutation_types'

Vue.use(Vuex)

const state = {
  msg: 'Hello Vue!',
  counter: 0
}

const mutations = {
  [CHANGE_MSG](state, msg) {
    state.msg = msg
  },
  [INCREMENT_COUNTER](state) {
    state.counter ++
  }
}

export default new Vuex.Store({
  state, mutations, getters, actions//should add getters and actions.
})

In the book, there is a part where we should add a script entry to the package.json file so that we can easily start our server.

What worked for me was

"scripts": {
  "dev": "node build/dev-server.js",
  "server": "json-server --watch server/db.json",
  <...>
}

Windows machines don't have cURL built in, so I would recommend using POSTMAN instead to test whether json-server is working properly after doing 'npm run server'.

https://github.com/PacktPublishing/Learning-Vuejs-2/blob/master/chapter6/shopping-list2/package.json

[error] "server": "node_modules/json-server/bin/index.js --watch server/db.json",
[fix] "server": "node node_modules/json-server/bin/index.js --watch server/db.json",

The unit tests for createShoppingList & deleteShoppingList from actions.js in chapter 7 are missing from this repository. It's not exactly clear how to test these methods. Please add the tests or explain how to go about testing them here. As well, please go into further detail about the syntax in the method.

createShoppingList: (store, shoppinglist) => {
  return api.addNewShoppingList(shoppinglist).then(() => {
    store.dispatch('populateShoppingLists')
  }, () => {
    store.commit(types.ADD_SHOPPING_LIST, shoppinglist)
  })
}

I don't understand why are there two objects and one being call like () => {...}

In the text, the steps say to do the following:

1. Bind the model title using the v-model directive to change-title-component in the template of the ShoppingListComponent.
2. Export value in the props attribute of the ChangeTitleComponent.
3. Create an onInput method inside the ChangeTitleComponent that will emit
   the native input method with the value of the event target.
4. Bind value to input inside the ChangeTitleComponent component's template
   and the v-on directive with the onInput modifier.

In step 4, the functionality works fine without binding the value to input and declaring any props:

<...>
<input @input = "onInput"/>
<...>

So why do we need to bind value to input inside the ChangeTitleComponent component's template and declare props if we are not receiving and value props inside the component in ShoppingListComponent?
// ShoppingListComponent
<

// ChangeTitleComponent
<input :value = "value" @input ="onInput"/>