Problems with vuex states

Question

When my application is started I make two requests to get some information (company and user informations) that I will use basically in all my components. I store this information in store.js

My App.vue

<template>
    <router-view></router-view>
</template>

export default{
   methods: {
       getCompanyIndormation(){
           //Vuex function to store company information
           this.setCompanyInformation(someinformation)
       },
       getUserInformation(){
           //Vuex function to store user information
           this.setUserInformation(someinformation)
       }
   }
}

My store.js

export default new Vuex.Store({
       state: {
          user: {
            id: '',
            name: '',
          },
          company: {
            name: '',
            subdomain: ''
         }
      },
      mutations: {
        setUserInformation: (state, obj) => {
            state.user.id = obj.id;
            state.user.name = obj.name;
        },
        setCompanyInformation: (state, obj) => {
           state.company.name = obj.name;
           state.company.subdomain = obj.subdomain;
        }
     }
})

So far everything works perfectly. My problem was when I tried to retrieve some information from the company in a mixin I own.

My mixin.js

import { mapState } from 'vuex';
const myMixin = {
    computed: {
      ...mapState(['company'])  
    },
    methods: {
       $getCompanyUrl(){
           return 'https:// '+this.company.subdomain+'/contact'
       }
    }
}

My problem here is that in some cases the function of my mixin normally returns the entire url, for example: https://domain1.com/contact but sometimes it returns https:///contact, that is, he didn't find it still the domain. Does anyone have any suggestions on how I can solve this problem? Do I add a watcher to see when the company's information has changed in the store or do I expect to finish all initial requirements before even rendering the router-view?

Where are you committing the setCompanyInformation mutation? Do you get it from a server? — Liel Fridman
That's right! I make a request with axios to my backend and the response I use on setCompanyInformation. I thought it was not necessary to put all the request code, so I omitted it. But if necessary I post too :) — Tom Lima
Well, then I'd just do something like v-if="company.subdomain !== ''" to avoid using it until the request is done — Liel Fridman

Kian Kian · Accepted Answer · 2020-09-27T07:03:22

Maybe just create a getter for company url in your store.

getters: {
  companyUrl: state => `https://${state.company.subdomain}/contact`,
},

And then use mapGetters anywhere else. The getters are meant to be watching the state changes.

Problems with vuex states

1 Answers