Extending VueJS with Vuex: the data manager

This is the part 3 of the series Working with Vuetify (parte 1 y parte 2), and on this entrance I want to teach about Vuex. Also, I would write the structure of code that I use for using the store and some others tricks I normally use.

What is … Vuex

Vuex is …. the best invention of all I know since I work with Javascript, and specially, since I do it with VueJS. The best definition is in its own page, but basically it is an information manager, converted into a VueJS library, which makes it a centralized information container.

In fact, it is a container where you can save, store and read information. If you want to use it, you must learn how it works by using the next image scheme:

Let’s try to decipher the image: Vuex has an state that is “the real truth”. Asociated it has View, that it is a mapped of the state, and last, you need Actions, for changing the value of the state.

This is all very theoretical, because in reality, to work with Vuex you need to understand the following scheme:

VueX relies on the State as an information container, which can be read by the components. However, in order to modify the information, it is necessary to use the Mutations, which are the ones that execute the modifications of the State.

However, modifications are not always instantaneous in terms of the request of the components, but require time. Hence, for asynchronous issues, it is necessary to execute Actions, which are the ones that call the APIs, and once the information is retrieved, the Commits are executed in the Mutations.

Apparently, it’s a bit of a mess, and believe me, at first it is. However, once you master the terminology behind the VueX scheme, it’s all pretty straightforward. So, you create the Actions with the API calls, and with the result you get, you call the commits. The Actions are executed by dispatch.

And so far, Vuex’s theory. Time to see related code.

Preparing the VueX container

The container of VueX, state, have been prepared on the file store/_index.js and the code is:

// Store by Vuex 
//    Version 1.2.2 - 20190326

const mapState = Vuex.mapState;
const mapGetters = Vuex.mapGetters;
const mapActions = Vuex.mapActions;  
const mapMutations = Vuex.mapMutations; 

const demo = true;

const _app = (demo) ? `Manejando Datos - DaskBoard Demo` : `Manejando Datos - DashBoard` ;
const _vers = (demo) ? '0.1.01' : '0.1.02'


// STATE VUEX
const state = {
	demo: true,
	app: _app,
	version: _vers,
	loading: false,
	card_text: 'Trabajando'
}
	
const getters = {
	appversion: state => { return `${state.app} - ${state.version}`; },
}

const mutations = {
	show_loading: set('loading') 
}

const store = new Vuex.Store({
	strict: true, // en development
	state,
	getters,
	mutations,
	modules: { // Your store-modules
		test,
	}
})

At the beginning, I defined “shorteners” of VueX functions, which it will be used throughout the application, and they are mapState, mapGetters, mapActions and mapMutations.

In my case, I like to define a demo variable, which is always boolean, to identify whether it is in testing or in production, which allows control of certain elements.

I also use this file store/_index.js to define global variables to be used throughout the application, if necessary. So, demo, version and app have been defined. You can include whatever you can need.

By the end of the file store/_index.js, you will have defined the four basic elements: state, getters, mutations and actions, and all of them will be integrated on the store.

Modifications in the HTML code

To include the store, we will need to make modifications in the HTML code, to include the loading of the Vuex library and the store file we have prepared (I only put the body).

<body>
  <div id="app"></div>
  	
	<script src="utils/state-mutators.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
	<script src="https://unpkg.com/vuex@3.1.1/dist/vuex.js" crossorigin="anonymous"></script>
	
	<script src="store/test.js"></script>
	<script src="store/_index.js"></script>
	
	<script src="components/menu.js"></script>
		
	<script src="scripts/index.js"></script>
  
</body>

I have included a js file called state-mutators.js , a file that I will be writting about it on part 4, but also I have included a module named test (as an example).

On the other hand, let’s include these new features on the scrips/index.js, where the code looks like this:

const bus = new Vue();
const vuetifyOptions = { };

Vue.use(Vuetify);


const app = new Vue({ 
	el: '#app',
	store,
	vuetify: new Vuetify(vuetifyOptions),
	template:
	`
<v-app v-cloak>
	<transition mode="out-in" name="fade">
		<menu-app></menu-app>
	</transition>
</v-app>`
});

The only change you can notice is that the store variable have been included on the variable app, allowing vue to use it.

To use VueX, we also make changes in the menu component, basically by retrieving the data from the store:

computed: {
		...mapGetters(['appversion']), 
		...mapState(['version']), 
	},

and now you are able to use it on the template. The template will have this aspect with this changes:

VueX is also integrated on VueTools

As a fundamental part of VueJS, everything that affects VueX is also included in VueTools, so you can see the store values, getters, actions, mutations, … of all your state when you are debugging the application. Without a doubt, the use of VueX with VueJS is fundamental, in my opinion, no matter the size of your project.

And part 3 is over, after extending VueJS with VueX. In part 4, I will be also writting about VueX and modules, because some times projects are large, and you need modules! To end with, improvements are explained on part 5 of the Worling with Vuetify series.

Extending VueJS with Vuex: the data manager

What is … Vuex

Preparing the VueX container

Modifications in the HTML code

VueX is also integrated on VueTools

Manejando Datos Newsletter