Carousel minor update for v0.4.3

This update brings some minor improvements to the
source code.

First I removed the HTTP request from the Photos component
because it does not belongs to it, instead I've created "actions"
inside the Vuex store, which is async and now the component can
 call the action in order to load the photos using the HTTP get request.

This allows everyone to have a source-agnostic gallery. To prove that
I changed the HTTP library from vue-resource to Axios, which is better in my
opinion.

I've also improved the README.

Patch notes:
- Add new action file for the Vuex store.
- Add new "hot to install" section inside readme
- Add new "Contributing guidelines" section inside readme
- Bump the version to v0.4.3
- Add new Axios library for HTTP calls

Author: Claudio Ludovico Panetta

CHANGELOG

@@ -2,6 +2,15 @@
 All notable changes to this project will be documented in this file.
 
 
+## [0.4.3]
+
+### Added
+- Add new action file for the Vuex store.
+- Add new "hot to install" section inside readme
+- Add new Axios library for HTTP calls
+- Add new "Contributing guidelines" section inside readme
+
+
 ## [0.4.2]
 
 ### Added

README.md

@@ -17,10 +17,13 @@
 
 ## How to install
 
-- Either download or clone this repository
-- Run `npm install` this will install all the necessary tools from NPM
-- Run `npm run build` this will create the dist folder
-- Grab the file inside the dist folder and follow the [How to use section](#how-to-use)
+In order to use the carousel you have to follow 3 simple steps:
+
+- Install the package from npm `npm install vuejs-carousel --save`
+- Go into your Vue main file or main javascript file
+- Import the carousel `import {Photo, Photos, Theater} from "vuejs-carousel"`
+- Add the component inside your views
+
 
 
 ## How to use
@@ -55,7 +58,12 @@ possible soon...
 
 ## Contributing
 
-If you want to contribute to this project issues and pull requests are welcome!
+If you want to contribute to this project issues and pull requests are welcome! In order to get started with the code you should:
+
+- Either download or clone this repository
+- Run `npm install` this will install all the necessary dependencies
+- Run `npm run dev`
+- Start coding :smile:
 
 ## License
 

dist/carousel.js

@@ -1,7 +1,7 @@
 {
   "name": "vuejs-carousel",
   "description": "Complete photo carousel build with VueJS and web standards in mind",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "author": "Claudio Ludovico Panetta <ludovico1990@hotmail.it>",
   "private": false,
   "license": "MIT",
@@ -23,6 +23,7 @@
     "url": "https://github.com/ludo237/vuejs-carousel.git"
   },
   "dependencies": {
+    "axios": "^0.15.3",
     "vue": "^2.1.6",
     "vue-resource": "^1.0.3",
     "vuex": "^2.1.1"

package.json

@@ -27,12 +27,8 @@
         },
 
         mounted() {
-            this.$http.get(this.source).then((response) => {
-                this.$store.commit("writePhotos", response.data);
-            }, (response) => {
-                console.error(response);
-            });
-        },
+            this.$store.dispatch("loadPhotos", this.source);
+        }
     }
 </script>
 

src/components/Photos.vue

@@ -0,0 +1,19 @@
+import Axios from "axios";
+
+export const actions = {
+
+    /**
+     * Load the photo from the source provided by
+     * the gallery
+     *
+     * @param commit
+     * @param {String} source
+     */
+    loadPhotos: ({commit}, source) => {
+        Axios.get(source).then(function (response) {
+            commit("writePhotos", response.data);
+        }).catch(function (error) {
+            console.error(error);
+        });
+    }
+};

src/store/actions.js

@@ -1,10 +1,10 @@
 import Vue from "vue";
 import Vuex from "vuex";
-Vue.use(Vuex);
-
 import {state} from "./states";
 import {getters} from "./getters";
 import {mutations} from "./mutations";
+import {actions} from "./actions";
+Vue.use(Vuex);
 
 /**
  * Carousel main store
@@ -18,5 +18,6 @@ import {mutations} from "./mutations";
 export const store = new Vuex.Store({
     state,
     getters,
-    mutations
+    mutations,
+    actions
 });