Common Vue Problems — Namespaced Vuex Actions, Downloading Binaries, and More
Tags: vue, webdev, programming, javascript
Published: 2021-01-26 01:19:23

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

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.