CONTRIBUTING.md

Use a Consistent Coding Style

The idea is that the code is as readable as possible for everyone, not just for those who come from quasar.

The project include a ESlint rules and you need any extension (in case of vs code) like ESLint

---

Store access

For access to store getters or mutations you simple use the direct access like;

This ✔️

In Javascript

//Code...
this.$store.commit('collection/SET_COLLECTION', this.$store.getters['collection/getCollectionModel'])
// More code...

In template

 <div class="q-mt-md" v-if="$store.getters['collection/getIsTableContentReady']">

---

Not this ❌

In Javascript

import { mapGetters } from 'vuex'
//...

this.$store.commit('collection/SET_COLLECTION', this.getCollectionModel)

<div class="q-mt-md" v-if="getIsTableContentReady">

The code turns out to be a bit longer but instantly you know that "it" comes from the store

Methods names

It is healthy that all the methods that are added / modified have descriptive and summarized names (very difficult to achieve in the short term, but very beneficial in the long term).

The structure in which these are composed is very important.

This ✔️

//Components/Views/Layout
methods: {
  getContentCollection(){
    //code...
  }
}

//Store modules
export default {
  namespaced: true,
  state: {
    collection: {
      item: [],
    },
    isTableContentReady: false
  },
  getters: {
    getCollection (state) {
      return state.collection
    },
    getIsTableContentReady (state) {
      return state.isTableContentReady
    },
  },
  mutations: {
    SET_COLLECTION (state, payload) {
      state.collection = payload
    },
    SET_TABLE_CONTENT_READY (state, value) {
      state.isTableContentReady = value
    }
  }
}

Not this ❌

methods: {
  content(){
    //code...
  }
}

// Or

methods: {
  content:(){
    //code...
  }
}

//Store modules
export default {
  state: {
    data: {},
    readyT: false
  },
  getters: {
    getData (state) {
      return state.data
    },
    getReadyT (state) {
      return state.readyT
    },
  },
  mutations: {
    setdata (state, data) {
      state.data = data
    },
    setreadyT (state, data) {
      state.readyT = data
    }
  }
}

For the store i recomend Vuex conventions