Show Menu
Cheatography

Vue & Vuex & Quasar Cheat Sheet (DRAFT) by

This is a draft cheat sheet. It is a work in progress and is not finished yet.

Import vuex modules from another file

New store-file.js:

const state = {}
const mutations = {}
const actions = {}
const getters = {
   getterName: (state) => {
      return state.array
   }

export default {
   namespaced: true
   state,
   mutations,
   actions,
   getters
}
index.js (main store file
import store from './store-file'

const Store = new Vuex.Store({
   modules: {
         store
      }
   })
component.vue:

<script>
   import { mapGetters } from 'vuex'

   export default {
   computed: {
      ...mapGetters('storeName', ['getterName'])
   }
</script>

Getter to retrieve all array

const getters = {
   getterName: (state) => {
      return state.array
}

Getter returning only certain elements

const getters = {
  tasksTodo: state => {
    let tasks = {}
    Object.keys(state.tasks).forEach(function (key) {
      let task = state.tasks[key]
      console.log('task: ', task)
      if (!task.completed) {
        tasks[key] = task
      }
    })

    return tasks;
  }
};
 

Deleting using vuex

component.vue where the method is triggered
<script>
    import { mapActions } from 'vuex'
    

methods: {
    ...mapActions('storeName', ['actionName']
        promptToDelete() {
            this.$q.dialog({
                title: 'Confirm',
                message: 'Are You sure?',
                persistent: true }).onOk(() => {
                    this.deleteFood(this.food.id)
                })
        }
    }


quasar.conf.js
plugins: [
 'Dialog'
]

store.js
import Vue from 'vue'

const actions = {
    deleteFood({ commit }, id) {
        commit('deleteFood', id)
    }
}

const mutations = {
    deleteFood(state, id) {
        let index = state.foods.findIndex( (food) => food.id == id)
        Vue.delete(state.foods, index)
    }
}

Basic delete­/ad­d/edit operations

deleteFood: (state, id) => {
    let index = state.foods.findIndex(food => food.id == id);
    Vue.delete(state.foods, index);
  },
  addFood: (state, food) => {
    state.foods.push(food)
  },
  editFood: (state, food) => {
    let index = state.foods.findIndex(elem => elem.id == food.id);
    console.log(food, index)
    Vue.set(state.foods, index, food)
  }
 

Quasar input validation

<q-input
    :rules="[
    val => val.length < 21 || "Please use maximum of 20 characters"
    filled
    v-model="foodToSubmit.name"
    label="Name (e.g. Burger)"
    class="col" />

Validate requir­ments on submit

<q-input
    :rules="[
    val => val.length < 21 || "Please use maximum of 20 characters"
    ref="name"
     />

<q-btn
    @click="submitForm"
    label="Save"
    color="primary"
    v-close-popup />

methods: {
    submitForm() {
        this.$refs.name.validate()
        
        if (!this.$refs.name.hasError){
        this.submitFood()
        }
    },
    submitFood() {
        [...]
    }

}

Populating fields with data

mounted() {
    if (this.type == "edit") {
      console.log(this.food);
    }

Condit­ional displaying of tag

v-if="Object.keys(tasksTodo).length

Computed with setter and gettter

computed: {
    ...mapState("tasks", ["search"]),
    searchField: {
      get() {

      },
      set(value) {
          
      }
    }
  }
       

Support Cheatography!