Common Vue Problems — Namespaced Vuex Actions, Downloading Binaries, and More

Vue.js makes developing front end apps easy. However, there are still chances that we’ll run into problems.

In this article, we’ll look at some common issues and see how to solve them.

Dispatch Actions Between 2 Namespaced Vuex Actions

Given that we have 2 or more namespace Vuex actions:

game.js

const actions = {
  myAction({dispatch}) {
    ...
    dispatch('notification/triggerSelfDismissingNotifcation', {...})
  }
}

notification.js

const actions = {
  dismiss(context, payload) {
    ...
  }
}

We can dispatch them by adding the namespace before the action name.

For instance, we can write:

dispatch('notification/dismiss', {...}, { root: true })

The 1st argument is the name of the action with the namespace name before it.

The 2nd argument has the payload as usual.

The root property in the 3rd argument is used to access the namespace actions.

The action won’t be found without it.

We also have to remember to set namespaced to true in the Vuex store module.

Get Query Parameters from a URL

We can get query parameters from a URL with the this.$route.query property.

For instance, if we have:

/url?foo=bar

in our URL, then we can get the query parameter with the key foo by writing this.$route.query.foo .

Vue Router Router Link Active Style

We can add styles to the router-link-active class or router-link-exact-active class to add some styles like highlight to an active link.

router-link-active is applied when the target route is matched.

router-link-exct-active is matched when the exact match for a route is found.

To style, we can write something like:

.router-link-active,
.router-link-exact-active {
  background-color: green;
  cursor: pointer;
}

Then we will get a green background for the router-link that’s active.

The class name can be changed.

To do that, we can set the linkActiveClass and linkExactActiveClass properties.

For instance, we can write:

const router = new VueRouter({
  routes,
  linkActiveClass: "active",
  linkExactActiveClass: "exact-active",
})

We change the active class from router-link-active and router-link-exact-active to active and exact-active respectively.

Passing Multiple Parameters to an Action with Vuex

Vuex actions accept a state and pyaload parameter.

So we can pass in an object to the 2nd argument of commit if we need to pass in more than one piece of data.

For instance, we can write:

store.commit('authenticate', {
  token,
  expiration,
});

We have an object with the token and expiration properties in the 2nd argument.

Then to define the authenticate mutation, we can write:

mutations: {
  authenticate(state, { token, expiration }) {
    localStorage.setItem('token', token);
    localStorage.setItem('expiration', expiration);
  }
}

We get the properties from the 2nd parameter, which is the payload parameter.

Then we can do what we want with it, like saving the values in local storage.

Saving Blob Data with Axios

We can save blob data with Axios by creating a new Blob instance.

Then we can call window.URL.ceateObjectURL with it.

For instance, we can write:

axios
  .get(`url/with/pdf`, {
    responseType: 'arraybuffer'
  })
  .then(response => {
     const blob = new Blob([response.data], { type: 'application/pdf' }),
     const url = window.URL.createObjectURL(blob);
     window.open(url);
  })

We have responseType set to 'arraybuffer' to tell Axios that we’re downloading a binary file.

Then we create a Blob instance, with the response.data , which has the binary data, in an array in the 1st argument.

The 2nd argument sets the file mime type to 'application/pdf' .

Then we create the URL to let us download the file with window.URL.createObjectURL .

Finally, we call window.open with then returned URL to download the file to the user’s computer.

Clearing Cache After Each Deploy

We can clear the cache after deploying a Vue app in a few ways.

One way is to use the webpack-assets-manifest to append a random hash name to the file name of static files.

Also, we can upload it to a versioned folder in the CDN.

no-cache headers also work on most browsers excerpt IE, so we can set them to disable caching.

Conclusion

We can clear cache with some packages like webpack-assets-manifest to add a hash to our static files.

Vuex actions can have namespaces so that we can separate them into namespaces.

The payload of a Vuex mutation is its 2nd argument, so we can pass value if we want to pass in one piece of data or an object if we want to pass in more.