update badges in tabs

pureblood

Hey guys,

I have been playing around with quasar for about a week steadily and coming from ionic, I am impressed by the performance so far - at least with the things that I needed to build.

Currently I am at a point where I do not really know where to look for an answer, so I thought I will give it a try here.

What I achieved so far:

I started building an instagram clone app to learn more about the concepts of vue and quasar
built a layout with tabs and leftdrawer menu
routing is done via lazy loading (pages are loaded through the layout.vue as well)
so far I got the timeline/wall, the profile page and a visitors page

What I want to do next:

implement notification badges on the tab icons (like you are used to from facebook, whatsapp and so forth, to me that is best practice)
with every page opening (so whenever I click a tab icon) i want to do an ajax call in the background and then update the numbers in the badges accordingly

What I dont know where to start:

where would I put such an ajax call?
i successfully use ajax calls in each page to get the necessary content so far, so I thought i could put my new call there as well BUT:
How would I update the tab badges inside layout.vue from a page? I dont know how to access those from there.

But I guess I am just coming from the wrong angle… so what is the best practice for vue/quasar?

pureblood

I tried googleing for a day and I guess (have no clue so far) that vuex might be a thing for such a challenge. Will dig a little deeper within the next days, what this vuex is all about

pureblood

A succesfull day on my own:
https://quasar.dev/options/global-event-bus#Introduction

I was able to just use the global event bus from quasar as a solution.

Easy thing once you found it:
For each badge counter that I have in my layout, I create an event to keep it updated throughout the app.
On each screen (or later by push) I emit an event with the current counter and that updates the badge automatically.

Solved.

qyloxe

There are few concepts which might be helpful:

computed setters:

https://vuejs.org/v2/guide/computed.html#Computed-Setter

@input event in QTabs API:

https://quasar.dev/vue-components/tabs#QTabs-API

metalsadman

You could use vuex too.

pureblood

@qyloxe said in update badges in tabs:

https://vuejs.org/v2/guide/computed.html#Computed-Setter

how so?
Maybe I am not getting it really, but this sounds the wrong way around.

tabs are in layout.vue
the trigger functions to update the tabs are in every other component.

the @input of tabs will be fired within layout vue wont it? how can I access it from another component then?

qyloxe

you can use such code as a mixin in both components and keep state in vuex. In both component you will have access to actual, reactive state from Vuex - without any mystic events:

import { mapGetters, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapGetters(['getUILeftDrawerOpen']),
    leftDrawerOpen: {
      get () {
        return this.getUILeftDrawerOpen
      },
      set (value) {
        this.setUILeftDrawerOpen(value)
      }
    }
  },
  methods: {
    ...mapMutations(['setUILeftDrawerOpen'])
  }
}

pureblood

@qyloxe ok understood - so still the vuex way
that I found out about in my second post (see above), I thought you meant that there was another way aside vuex or global bus events.

so for now, there are two ways. global (mystic) bus events and vuex
thanks!

qyloxe

@pureblood said in update badges in tabs:

@qyloxe ok understood - so still the vuex way
that I found out about in my second post (see above), I thought you meant that there was another way aside vuex or global bus events.

so for now, there are two ways. global (mystic) bus events and vuex
thanks!

Yep ALWAYS vuex when you have even a slightly smell of shared state. As a bonus you have reactive properties, namespaced state hierarchy, transactions (something like), version history (in chrome extension), debugging, easy persistence etc. The downside is that vuex is declarative BUT there are many extensions, tools, good practices as of yet. For example I recommend using this:
https://vuex-orm.github.io/vuex-orm/guide/prologue/what-is-vuex-orm.html
And a rule of thumb: if you think about using events in vue then probably there is another solution (reactive). Thinking in events is “old way”. Thinking in reactive data models is “vue way”. Of course events ARE useful, but when you need to communicate action (ie click, hide, move, ), not share state. When you think about event “change” - you are probably dealing with hidden state.

pureblood

ok, I agree I need to dig into that next