Vue.js 2 Web Development Projects

Action dispatching

In the maps store, let's create a setBounds action that will be dispatched when the maps is idle after being panned or zoomed. This action will dispatch the fetchPosts from the posts module:

1. Use the { root: true } option to dispatch the action in a non-namespaced way so you can reach the posts module one:

      setBounds ({ dispatch }, value) {        dispatch('posts/fetchPosts', {          mapBounds: value,        }, {          root: true,        })      },

We have created another action in the maps module because it is related to the map and it could do more in the future than just dispatching another action.

2. In the BlogMap.vue component, map the new setBounds action on the right helper and add a 'map' ref and an 'idle' event listener to the map:

 <googlemaps-map ...