Refactoring vue.js

index.html

@@ -15,7 +15,7 @@
       <div class="jumbotron">
         <h1>Bouquins</h1>
         <p>Cette bibliothèque contient actuellement <strong>{{ booksCount }}</strong> livres et BD en format papier ou électronique.</p>
-        <button class="btn btn-primary" type="button" v-on:click="loadBooks">Livres</button>
+        <button class="btn btn-primary" type="button" @click="loadBooks">Livres</button>
       </div>
       <div class="table-responsive" v-if="books.length > 0">
         <table class="table table-striped">

index.js

@@ -1,64 +1,52 @@
-(function(root) {
-	'use strict';
-
-	function sendQuery(url, error, success) 
-	{
-		var xmh = new XMLHttpRequest();
-		var v;
-
-		xmh.onreadystatechange = function() {
-			v = xmh.responseText;
-			if (xmh.readyState === 4 && xmh.status === 200) {
-        var res;
-        try  { 
-          res = JSON.parse(v);
-        } catch (err) {
-          if (null !== error)
-            error(err.name, err.message);
-        }
-				if (null !== success)
-					success(res);
-			} else if (xmh.readyState === 4) {
-				if (null !== error)
-					error(xmh.status, v);
-			}
-		};
-
-		xmh.open('GET', url, true);
-		xmh.send(null);
-	}
-
-  function stdError(code, resp) {
-    console.log('ERROR ' + code + ': ' + resp);
-  }
-
-  function booksSuccess(resp) {
-    app.books = resp;
-  }
-
-  function indexSuccess(resp) {
-    app.booksCount = resp.count;
-  }
-
-	function loadIndex() {
-		sendQuery('cgi-bin/bouquins/index', stdError, indexSuccess);
-	}
-
-	function loadBooks() {
-		sendQuery('cgi-bin/bouquins/books', stdError, booksSuccess);
-	}
-
-	root.loadIndex = loadIndex;
-  root.loadBooks = loadBooks;
-})(this);
-
 var app = new Vue({
   el: '#app',
   data: {
     books: [],
     booksCount: 0
   },
+  methods: {
+    sendQuery: function(url, error, success) {
+      var xmh = new XMLHttpRequest();
+      var v;
+
+      xmh.onreadystatechange = function() {
+        v = xmh.responseText;
+        if (xmh.readyState === 4 && xmh.status === 200) {
+          var res;
+          try  { 
+            res = JSON.parse(v);
+          } catch (err) {
+            if (null !== error)
+              error(err.name, err.message);
+          }
+          if (null !== success)
+            success(res);
+        } else if (xmh.readyState === 4) {
+          if (null !== error)
+            error(xmh.status, v);
+        }
+      };
+
+      xmh.open('GET', url, true);
+      xmh.send(null);
+    },
+    stdError: function(code, resp) {
+      console.log('ERROR ' + code + ': ' + resp);
+    },
+    indexSuccess: function(resp) {
+      this.booksCount = resp.count;
+    },
+    loadIndex: function() {
+      this.sendQuery('cgi-bin/bouquins/index', this.stdError, this.indexSuccess);
+    },
+    booksSuccess: function(resp) {
+      this.books = resp;
+    },
+    loadBooks: function() {
+      this.sendQuery('cgi-bin/bouquins/books', this.stdError, this.booksSuccess);
+    }
+  },
   mounted: function() {
-    loadIndex();
+    this.loadIndex();
   }
 })