Vue & Vuex & Quasar Cheat Sheet (DRAFT) by przemekgrenda

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>

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

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;
  }
};

 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)
    }
}

  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)
  }

<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" />

<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() { 
        [...]
    }

}

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

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

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

      },
      set(value) {
          
      }
    }
  }