Category: JavaScript

Sometimes, we want to get Vuex state from a JavaScript file with Vue.js.

In this article, we’ll look at how to get Vuex state from a JavaScript file with Vue.js.

How to get Vuex state from a JavaScript file with Vue.js?

To get Vuex state from a JavaScript file with Vue.js, we can import the Vuex store and use it directly.

For instance, we write

import { store } from "../store";

export function getAuth() {
  return store.state.authorization.AUTH_STATE;
}

to import the store from a module.

Then we get a state value from the store with store.state.authorization.AUTH_STATE.

Conclusion

To get Vuex state from a JavaScript file with Vue.js, we can import the Vuex store and use it directly.

Sometimes, we want to add a class conditionally in Vue.js.

In this article, we’ll look at how to add a class conditionally in Vue.js.

How to add a class conditionally in Vue.js?

To add a class conditionally in Vue.js, we can add the :class directive.

For instance, we write

<template>
  <div id="app">
    <div :class="condition ? 'class-if-is-true' : 'else-class'"></div>
  </div>
</template>

to set the class prop of the div to 'class-if-is-true' if condition is true.

Otherwise, we set class to 'else-class'.

Conclusion

To add a class conditionally in Vue.js, we can add the :class directive.

Sometimes, we want to hide div on click in Vue.js.

In this article, we’ll look at how to hide div on click in Vue.js.

How to hide div on click in Vue.js?

To hide div on click in Vue.js, we can use the v-if directive.

For instance, we write

<template>
  <div id="app">
    <button @click="isHidden = true">Hide</button>
    <button @click="isHidden = !isHidden">Toggle hide and show</button>

    <h1 v-if="!isHidden">Hide me on click event!</h1>
  </div>
</template>

<script>
//...
export default {
  //...
  data() {
    return {
      isHidden: false,
    };
  },
  //...
};
</script>

to add the isHidden reactive property by returning it in the object in the data method.

And then we add 2 buttons.

The first set isHidden to true when we click it.

And then 2nd toggles the value of isHidden between false and true when we click it.

We then add v-if to show the h1 element when isHidden is false.

Conclusion

To hide div on click in Vue.js, we can use the v-if directive.

Sometimes, we want to access props in a Vue.js component data function.

In this article, we’ll look at how to access props in a Vue.js component data function.

How to access props in a Vue.js component data function?

To access props in a Vue.js component data function, we can get them from this.

For instance, we write

<script>
//...
export default {
  //...
  props: ["messageId"],
  data() {
    const theData = {
      someVar: this.messageId,
    };
    return theData;
  },
  //...
};
</script>

to register the messageId prop.

Then we get the initial value of the messageId prop with this.messageId in the data method.

Conclusion

To access props in a Vue.js component data function, we can get them from this.

Sometimes, we want to show loading when making ajax request with Axios in Vue.js.

In this article, we’ll look at how to show loading when making ajax request with Axios in Vue.js.

How to show loading when making ajax request with Axios in Vue.js?

To show loading when making ajax request with Axios in Vue.js, we can add Axios request and response interceptors and set the loading state in the interceptor methods.

For instance, we write

<script>
//...
export default {
  //...
  created() {
    axios.interceptors.request.use(
      (config) => {
        this.isLoading = true;
        return config;
      },
      (error) => {
        this.isLoading = false;
        return Promise.reject(error);
      }
    );

    axios.interceptors.response.use(
      (response) => {
        this.isLoading = false;
        return response;
      },
      (error) => {
        this.isLoading = false;
        return Promise.reject(error);
      }
    );
  },
  //...
};
</script>

to call axios.interceptors.request.use to add a request interceptor and call axios.interceptors.response.use to add a response interceptor in the component’s created hook to add the interceptors before the component is mounted.

We call them with methods that sets isLoading to differnt values.

We have this.isLoading = true; when we’re making the request

And in the other functions, we set isLoading to false since the request is finished.

Conclusion

To show loading when making ajax request with Axios in Vue.js, we can add Axios request and response interceptors and set the loading state in the interceptor methods.