Instead of centralizing all the code in a Component, it’s common practice to use Services.
Services are Classes that contain domain specific code like Ionic Native Device actions, Ionic Native Storage actions, Ionic routing.
When it comes to Services, AngularJS set the bar quite high. Back in the days we had:
Angular then simplified it by only offering the basic Services making life simpler for new Ionic users.
In this tutorial, we will analyze how we can use Services with Vue in an Ionic application.
We will :
- See an example of an unshared Service
- Share a Service instance between two Ionic Vue Components
- Use a Singleton Service
You will have to go back to the first tutorial so we can work with the Ionic team’s stack.
Just a Simple Vanilla JS Service
A Service is by nature just a Class that exists in another file.
We can create one in a vanilla-js-service.ts file:
This is a very simple Service that only has a sayHello method.
We can import it in our main.ts file:
When the Ionic Vue Component is initialized, we will instantiate a new VanillaJsService instance and stock it in a vanillaJsService property.
The useVanillaJsService method will call the sayHello method from this property.
And we will call this method in the index.html file:
Resulting in:Let’s create a more complex Service.
We will create a traditional counter in a counter-service.ts file:
This Service has a counter property which starts at 0.
The add method increments the counter and the show method shows the current counter’s value.
We will import this Service in two Ionic Vue Components:
Both Ionic Vue Components will have a counterService property created from the CounterService Class and will delegate their actions to this property.
We import them in the main.ts file:
As we have seen in the previous Ionic Vue Components tutorial, we add those Components to the components field and use them in the index.html:
The Service is working as it should, when we use the Component 2, the counter gets updated for this Component and the Component’s 1 counter stays at 0. However, how can we share the same counter in every Ionic Vue Component?
In the previous example, we created a new CounterService instance in each Component.
Instead of creating a new one, we can create one and use it in both Components:
A new CounterService instance is created then stored in a sharedCounter const.
We then create a First and Second Components that will use this sharedCounter Service in their methods.
All we need now is adding those Components to the components field:
And use them in the index.html file:
We now have our counter shared between both Ionic Vue Components:
It’s working, but it’s quite annoying to have every Component in the same file right?
We can create a global variable using CounterService then use it wherever we want, however, by experience, global variables generally come to bite us in the a** later on.
Let’s see if we can do better.
This time we will use the good old Singleton pattern.
Since we are using the Ionic’s stack, let’s inspire ourself from one of the best TypeScript resource and create the counter-singleton.ts file:
Thanks to this Class, we will only have one CounterSingleton instance in our Ionic Vue application!
We only need to replace CounterService by CounterSingleton:
And here we have both ComponentOne and ComponentTwo sharing the same Service:
Services are used to keep the Components simple, follow the Don’t Repeat Yourself principle (DRY) or share states in the application.
Vue has been around for quite some time. If they wanted to add a service field in the Components options, they would have done it a long time ago.
AngularJS popularized the usage of Services to share states between Components, however, “recently” Redux/VueX Stores started to rise, we will see more about this in another VueX tutorial.