Научите Вуек за 5 минута

Овај водич ће вам дати основно разумевање Вуек-а изградњом апликације за израду плана. Корисник може да укуца активности, а затим да гласа колико им се свиђају / не свиђају.

Када прочитате овај водич, можете погледати наш бесплатни Вуек курс о Сцримби, ако сте заинтересовани за сазнање више.

Шта је Вуек? Из Вуеове званичне документације

Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. 

Овај курс претпоставља да сте донекле упознати са Вуе-ом и ми ћемо се укратко дотакнути функција попут propsкомпонената и веза, али их нећемо детаљно прегледати. Ако желите да имате брзи почетни текст о Вуеу, слободно погледајте овај курс о Сцримби.

Неопходна подешавања

У Сцримби су компликоване поставке нешто што једноставно не радимо.

За ово упутство смо креирали једноставну ХТМЛ датотеку у коју се све може написати. Слободно напишите свој ЦСС или га једноставно копирајте са овог игралишта

Вуе и Вуек библиотеке се увозе преко ЦДН-а помоћу ознака:

         Activity Voter                      /*         ADD CSS HERE       */ /*       ADD VUE CODE HERE     */     

Можете и да експериментишете са кодом на овом игралишту Вуе Сцримба. Не заборавите да поново повежете игралиште са својим налогом.

План апликација

Направићемо апликацију за гласање, која посебно добро функционише када сте у групи пријатеља који не знају шта да раде и морају да размотре све могућности.

Функционалност ће се састојати од тога да корисник може да укуца активност, а затим ће свака активност имати дугме за гласање према горе и доле за бројање укупних резултата.

Почетак

Прво, хајде да се брзо ругамо нашој апликацији у ХТМЛ-у. Користићемо овај изглед да бисмо затим издвојили у засебну компоненту и додаћемо функционалност да изглед оживи.

Activity voter

          Add Activity    
       
  •       Go Snowboarding ?         ?         5         ?          
  •  

Додајте Вуек продавницу са неким основним подацима

Вуек почиње са продавницом. Продавница је место где држимо (складиштимо) своју државу.

   Vue.use(Vuex);   const store = new Vuex.Store({   });   new Vue({     el: "#app",     store   });  

Хајде да у продавницу додамо и неке кодиране податке који ће садржати једну активност и низ са једним емоџијем да бисмо приказали своја осећања према тој активности.

   Vue.use(Vuex);   const store = new Vuex.Store({     state: {       activities: [{ name: "go snowboarding", rating: 5 }],       emojis: ["?"]     }   });   new Vue({     el: "#app",     store   });  

Да бисмо омогућили да се наше стање реактивно мења, можемо користити Вуек mapStateза обраду израчунатих својстава стања за нас.

  new Vue({     el: "#app",     store,     computed: Vuex.mapState(["activities", "emojis"])   }); 

Додај компоненту

Сада имамо активности унутар наше државе. Направимо засебну компоненту за сваку од тих активности. Сваком ће требати activityи emojisреквизити.

Vue.component("activity-item", {   props: ["activity", "emojis"],   template: `     
  •       {{ activity.name }}         {{ emojis[0] }}         ?         {{activity.rating}}         ?          
  •     ` });

    У унутрашњости appсада можемо да користимо нашу новостворену компоненту са свим одговарајућим activityвезивима и емојијима. Као кратки подсетник, ако желимо да премотавамо низ и прикажемо компоненту за сваку ставку у низу, у Вуе-у можемо користити v-forвезивање.

    Activity voter

              Add Activity    
         

    Додајте мутације у складиште

    Ако желимо да ажурирамо продавницу у Вуеку, можемо користити мутације. Тренутно ћемо знати console.logда се догодила мутација и спровешћемо је касније.

    const store = new Vuex.Store({   state: {     activities: [       { name: "go snowboarding", rating: 5 },     ],     emojis: ["?"]   },   mutations: {     increment(state, activityName) {       console.log('increment');     },     decrement(state, activityName) {       console.log('decrement');     },   } }); 

    Како да покренемо мутацију? Позивамо commitфункцију $storeса именом мутација које желимо да се изврше. Било који аргументи након имена мутације третирају се као аргументи почињене мутације.

    new Vue({   el: "#app",   store,   data() {     return {       activityName: ""     };   },   computed: Vuex.mapState(["activities", "emojis"]),   methods: {     increment(activityName) {       this.$store.commit("increment", activityName);     },     decrement(activityName) {       this.$store.commit("decrement", activityName);     }   } }); 

    Додајте функционалност компоненти

    Each activity-item has voting buttons that need to increment and decrement on click of a button. We can pass these functions as props. Let's now bind our methods to props.

    Let's also not forget to provide activity.name as an argument to both.

    Vue.component("activity-item", {   props: ["activity", "emojis", "increment", "decrement"],   template: `     
  •       {{ activity.name }}           {{ emojis[0] }}           ?           {{activity.rating}}           ?          
  •     ` });

    And there we go! The flow is working. We can see the console.log statement in the console.

    Implement counter

    Let's implement the counter. First, we need to find an activity by its name, and then update its rating.

      mutations: {     increment(state, activityName) {       state.activities         .filter(activity => activity.name === `${activityName}`)         .map(activity => activity.rating++);     },     decrement(state, activityName) {       state.activities         .filter(activity => activity.name === `${activityName}`)         .map(activity => activity.rating--);     }   } 

    Perfect, we can now vote on activities.

    Use form input to add activity

    But of course, we need to be able to add activities too.

    Let's create a mutation to the store, that would add an activity to the list of existing activities, with a name that we will later get from the input and a default rating of 0.

     mutations: {     ...     addActivity(state, name) {       state.activities.push({ name, rating: 0 });     }   } 

    Inside methods, we can commit a new activity to the store.

    methods: {     ...     addActivity(activityName) {       this.$store.commit("addActivity", activityName);     }   } 

    Implement form submission

    Let's wire up the submit function to our HTML form.

          Add Activity  

    We can now add our submit function to methods. Inside, we're going to use our existing addActivity method and in the end, reset activityName in the input field to an empty string.

    methods: {     ...     onSubmit(e) {       e.preventDefault();       this.addActivity(this.activityName);       this.activityName = "";     }   } 

    We call e.preventDefault() to avoid the form from reloading on each addition of a new activity.

    All the counters now work and the field gets updated. It does look a bit strange, that we have only one emotion for all the activities, no matter what their rating is.

    Let's rewrite emojis into an object with some description of what moods they are meant to reflect and clean up existing state, so we start from no activities.

    state: {     activities: [],     emojis: { yay: "?", nice: "?", meh: "?", argh: "?", hateIt: "?"} }, ... 

    And as a finishing touch, we can display different emojis depending on the rating an activity has.

    Vue.component("activity-item", {   props: ["activity", "emojis", "increment", "decrement"],   template: `     
  •       {{ activity.name }}             ` });
  • Почињемо са празном апликацијом, што смо и желели.

    А сада ако додамо две активности које смо некада имали у апликацији, гласајте за оцене које имамо емоџије које одражавају наше мишљење о активностима!

    Комплетни код можете погледати овде.