Author: John Au-Yeung

Sometimes, we want to fix ‘this.$store is undefined’ with Vue.js and Vuex.

In this article, we’ll look at how to fix ‘this.$store is undefined’ with Vue.js and Vuex.

How to fix ‘this.$store is undefined’ with Vue.js and Vuex?

To fix ‘this.$store is undefined’ with Vue.js and Vuex, we should put the Vuex store instance into the object we use to create the Vue instance.

For instance, we write

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import Vuex from "vuex";
import store from "./store";

Vue.config.productionTip = false;

Vue.use(Vuex);

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

to import the Vuex store and put it into the object we create the Vue instance with to make this.$store available in all components in the app.

Conclusion

To fix ‘this.$store is undefined’ with Vue.js and Vuex, we should put the Vuex store instance into the object we use to create the Vue instance.

Sometimes, we want to get an input field value in Vue.js.

In this article, we’ll look at how to get an input field value in Vue.js.

How to get an input field value in Vue.js?

To get an input field value in Vue.js, we can bind the input value to a reactive property with v-model.

For instance, we write

<template>
  <div>
    <input v-model="groupId" />
  </div>
</template>

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

to bind the groupId reactive property to the input value with the v-model directive.

Then when we enter a value into the input box, we get the latest input value set as the value of groupId.

Conclusion

To get an input field value in Vue.js, we can bind the input value to a reactive property with v-model.

Sometimes, we want to use Vue Router beforeRouteEnter to trigger method in a Vue.js single file component.

In this article, we’ll look at how to use Vue Router beforeRouteEnter to trigger method in a Vue.js single file component.

How to use Vue Router beforeRouteEnter to trigger method in a Vue.js single file component?

To use Vue Router beforeRouteEnter to trigger method in a Vue.js single file component, we can call our method in the next callback.

For instance, we write

<script>
export default {
  //...
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.initializeSearch();
    });
  },
  //...
};
</script>

to call the initializeSearch method when the beforeRouterEnter is done running by calling next with a callback that calls the method.

vm is the component instance that has the initializeSearch method.

Conclusion

To use Vue Router beforeRouteEnter to trigger method in a Vue.js single file component, we can call our method in the next callback.

Sometimes, we want to update an entire array with Vuex.

In this article, we’ll look at how to update an entire array with Vuex.

How to update an entire array with Vuex?

To update an entire array with Vuex, we can use the Vue.set method.

For instance, we write

import Vuex from "vuex";
const store = new Vuex.Store({
  state: {
    items: [],
  },
  mutations: {
    MUTATE_ITEMS: (state, items) => {
      Vue.set(state, "items", [...items]);
    },
  },
  actions: {
    loadItems: (context, items) => {
      context.commit("MUTATE_ITEMS", items);
    },
  },
});

to add the MUTATE_ITEMS mutation method that calls Vue.set with state, the property in state to update, and the new value for state.items.

Using Vue.set will trigger reactivity in Vue, so all the components that listens for the store state will re-render if the values it’s watching have changed.

Conclusion

To update an entire array with Vuex, we can use the Vue.set method.

Sometimes, we want to smoothly animate v-show in Vue.js.

In this article, we’ll look at how to smoothly animate v-show in Vue.js.

How to smoothly animate v-show in Vue.js?

To smoothly animate v-show in Vue.js, we can use the transition component.

For instance, we write

<template>
  <div>
    <transition name="fade" mode="out-in">
      <div key="3" v-if="show">
        <div class="box yellow"></div>
      </div>
      <div key="1" v-if="!show">
        <div class="box blue"></div>
      </div>
    </transition>
  </div>
</template>

to add the transition component to 2 divs.

We set the name of the transition effect to get the effects to apply from the CSS styles of the classes that have name as the prefix.

We put the elements we want to animate inside.

And we add v-if to each to render the elements conditionally.

Since they’re in the transition component, we see the animation effect applied when we transition between the elements inside.

Conclusion

To smoothly animate v-show in Vue.js, we can use the transition component.