learning vue.js 2: part 2

6<br /> <br /> Plugins – Building Your House<br /> with Your Own Bricks<br /> In the previous chapter, you learned how to manage the global application store using the<br /> Vuex architecture. You learned a lot of new concepts and applied them. You also learned<br /> how to create a store, how to define its state and mutations, and how to use actions and<br /> getters. We brought our shopping list and Pomodoro applications to life using the<br /> knowledge acquired during the chapter.<br /> In this chapter, we will revisit Vue plugins, see how they work, and how they must be<br /> created. We will use some existing plugins and create our own.<br /> Summing it up, in this chapter, we are going to do the following:<br /> Understand the nature of Vue plugins<br /> Use the resource plugin in the shopping lists application<br /> Create a plugin that produces white, pink, and brown noises and apply it to our<br /> Pomodoro application<br /> <br /> The nature of Vue plugins<br /> Plugins in Vue.js are used for exactly the same purpose as they are used in any other scope:<br /> to add some nice functionality that, due to its nature, cannot be achieved with the core<br /> functionality of the system. Plugins written for Vue can provide various functionalities,<br /> starting from the definition of some global Vue methods or even the instance methods and<br /> moving toward providing some new directives, filters, or transitions.<br /> <br /> Plugins – Building Your House with Your Own Bricks<br /> <br /> In order to be able to use an existing plugin, you must first install it:<br /> npm install some-plugin --save-dev<br /> <br /> And then, tell Vue to use it in your application:<br /> var Vue = require('vue')<br /> var SomePlugin = require('some-plugin')<br /> Vue.use(SomePlugin)<br /> <br /> We can also create our own plugins. This is also easy. Your plugin must provide an<br /> install method where you define any global or instance methods, or custom directives:<br /> MyPlugin.install = function (Vue, options) {<br /> // 1. add global method or property<br /> Vue.myGlobalMethod = ...<br /> // 2. add a global asset<br /> Vue.directive('my-directive', {})<br /> // 3. add an instance method<br /> Vue.prototype.$myMethod = ...<br /> }<br /> <br /> Then it can be used just like any other existing plugin. In this chapter, we will use the<br /> existing resource plugin for Vue (https://github.com/vuejs/vue-resource) and create<br /> our own plugin that generates white, pink, and brown noises.<br /> <br /> Using the vue-resource plugin in the<br /> shopping list application<br /> Open the shopping list application (the chapter6/shopping-list folder) and run npm<br /> install and npm run dev. It's nice and clean, but it still uses the hardcoded list of the<br /> shopping lists. It would be really nice if we were able to add new shopping lists, delete<br /> them, and store the information on updated shopping lists so that when we restart the<br /> application, the displayed information corresponds to the last we saw before restarting. In<br /> order to be able to do that, we will use the resource plugin, which allows us to easily<br /> create REST resources and call REST methods on them. Before starting, let's summarize<br /> everything that we need to do in order to achieve this:<br /> First of all, we need to have a simple server that contains some storage from<br /> where we can retrieve and where we can store our shopping lists. This server<br /> must provide the needed endpoints for all this functionality.<br /> [ 200 ]<br /> <br /> Plugins – Building Your House with Your Own Bricks<br /> <br /> After creating our server and all needed endpoints, we should install and use the<br /> vue-resource plugin to create a resource and actions that will call the methods<br /> on the provided endpoints.<br /> In order to guarantee the data integrity, we should call actions that update<br /> server's state on each shopping lists update.<br /> On the application start, we should fetch shopping lists from the server and<br /> assign them to our store's state.<br /> We should also provide a mechanism to create new shopping lists and delete the<br /> existing ones.<br /> Doesn't sound too difficult, right? Let's start then!<br /> <br /> Creating a simple server<br /> For the sake of simplicity, we will use a very basic and easy-to-use HTTP server that stores<br /> data inside a regular JSON file. It is called json-server and it is hosted at https://github<br /> .com/typicode/json-server. Install it in the shopping list application's directory:<br /> cd shopping-list<br /> npm install --save-dev json-server<br /> <br /> Create a server folder with the db.json file inside it with the following content:<br /> //shopping-list/server/db.json<br /> {<br /> "shoppinglists": [<br /> ]<br /> }<br /> <br /> This will be our database. Let's add the script entry to our package.json file so that we<br /> can easily start our server:<br /> "scripts": {<br /> "dev": "node build/dev-server.js ",<br /> "server": "node_modules/json-server/bin/index.js --watch<br /> server/db.json",<br /> <br /> },<br /> <br /> Now, to start a server, just run the following:<br /> cd shopping-list<br /> npm run server<br /> <br /> [ 201 ]<br /> <br /> Plugins – Building Your House with Your Own Bricks<br /> <br /> Open the browser page at http://localhost:3000/shoppinglists. You will see an<br /> empty array as a result. This is because our database is still empty. Try to insert some data<br /> using curl:<br /> curl -H "Content-Type:application/json" -d '{"title":"new","items":[]}'<br /> http://localhost:3000/shoppinglists<br /> <br /> If you refresh the page now, you will see your new inserted value.<br /> Now that we have our simple REST server up and running, let's use it in our shopping list<br /> application with the help of the vue-resource plugin!<br /> <br /> Installing vue-resource, creating resources, and<br /> its methods<br /> Before going deeper into the usage of the vue-resource plugin, check out its<br /> documentation at https://github.com/vuejs/vue-resource/blob/master/docs/resour<br /> ce.md. Basically, the documentation provides an easy way of creating resources based on<br /> the given URL (in our case, it will be http://localhost:3000/shoppinglists). After<br /> the resource is created, we can call get, delete, post, and update methods on it.<br /> Install it in the project's folder:<br /> cd shopping-list<br /> npm install vue-resource --save-dev<br /> <br /> Now let's create the entry point for our API. Inside an src folder of the shopping list<br /> application, create a subfolder and call it api. Create an index.js file inside it. In this file,<br /> we will import the vue-resource plugin and tell Vue to use it:<br /> //api/index.js<br /> import Vue from 'vue'<br /> import VueResource from 'vue-resource'<br /> Vue.use(VueResource)<br /> <br /> Nice! Now we are ready to create ShoppingListsResource and attach some methods to<br /> it. To create a resource using the vue-resource plugin, we just call a resource method on<br /> Vue and pass the URL to it:<br /> const ShoppingListsResource = Vue.resource('http://localhost:3000/' +<br /> 'shoppinglists{/id}')<br /> <br /> [ 202 ]<br /> <br /> Plugins – Building Your House with Your Own Bricks<br /> <br /> The ShoppingListsResource constant now exposes all the methods needed for the<br /> implementation of CRUD (Create, Read, Update, and Delete) operations. It is so easy to<br /> use that we could basically export the resource itself. But let's export nice methods for each<br /> of the CRUD operations:<br /> export default {<br /> fetchShoppingLists: () => {<br /> return ShoppingListsResource.get()<br /> },<br /> addNewShoppingList: (data) => {<br /> return ShoppingListsResource.save(data)<br /> },<br /> updateShoppingList: (data) => {<br /> return ShoppingListsResource.update({ id: data.id }, data)<br /> },<br /> deleteShoppingList: (id) => {<br /> return ShoppingListsResource.remove({ id: id })<br /> }<br /> }<br /> <br /> The full code for the api/index.js file can be seen in this gist at https://gist.github.co<br /> m/chudaol/d5176b88ba2c5799c0b7b0dd33ac0426.<br /> That's it! Our API is ready to be used and to populate our reactive Vue data!<br /> <br /> Fetching all the shopping lists the application<br /> starts<br /> Let's start by creating an action that will fetch and populate store's shoppinglists state.<br /> After its creation, we can call it on the main App.vue ready state.<br /> Define a constant in the mutation_types.js file as follows:<br /> //mutation_types.js<br /> export const POPULATE_SHOPPING_LISTS = 'POPULATE_SHOPPING_LISTS'<br /> <br /> Now create a mutation. This mutation will just receive an array of shoppinglists and<br /> assign it to the shoppinglists state:<br /> //mutations.js<br /> export default {<br /> [types.CHANGE_TITLE] (state, data) {<br /> findById(state, data.id).title = data.title<br /> },<br /> <br /> [ 203 ]<br /> <br />