**Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vuejs.org).**
There may be data/utilities you'd like to use in many components, but you don't want to [pollute the global scope](https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch3.md). In these cases, you can make them available to each Vue instance by defining them on the prototype: +Il peut y avoir des données/utilitaires que vous aimeriez utiliser dans de nombreux composants, mais vous ne voulez pas [polluer la portée globale](https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch3.md). Dans ces cas-là, vous pouvez les rendre accessibles dans chaque instance de Vue en les définissant dans le prototype : ``` js -Vue.prototype.$appName = 'My App' +Vue.prototype.$appName = 'Mon App' ``` -Now `$appName` is available on all Vue instances, even before creation. If we run: +Maintenant, `$appName` sera accessible dans toutes les instances de Vue, même avant leur création. Si nous exécutons : ``` js new Vue({ @@ -22,32 +22,32 @@ new Vue({ }) ``` -Then `"My App"` will be logged to the console. It's that simple! +Alors `"Mon App"` sera affiché en console. C'est aussi simple ! -## The Importance of Scoping Instance Properties +## L'importance de la portée des propriétés d'instances -You may be wondering: +Il se peut que vous vous demandiez : -> "Why does `appName` start with `$`? Is that important? What does it do? +> "Pourquoi `appName` commence par un `$` ? Est-ce important ? Qu'est-ce que ça fait ? -No magic is happening here. `$` is simply a convention Vue uses for properties that are available to all instances. This avoids conflicts with any defined data, computed properties, or methods. +Aucune magie n'a lieu ici. `$` est simplement une convention que Vue utilise pour les propriétés qui sont accessibles dans toutes les instances. Cela évite les conflits avec toutes les autres données définies, propriétés calculées ou méthodes. -> "Conflicts? What do you mean?" +> "Conflits ? Qu'est-ce que ça signifie ?" -Another great question! If you just set: +Une autre bonne question ! Si vous faites juste : ``` js Vue.prototype.appName = 'My App' ``` -Then what would you expect to be logged below? +Alors qu'est-ce qui sera affiché ci-dessous d'après vous ? ``` js new Vue({ data: { - // Uh oh - appName is *also* the name of the - // instance property we just defined! - appName: 'The name of some other app' + // Oups - appName est *aussi* le nom de la + // propriété d'instance que nous venons de définir ! + appName: "Le nom d'une autre app" }, beforeCreate: function () { console.log(this.appName) @@ -58,13 +58,13 @@ new Vue({ }) ``` -It would be `"The name of some other app"`, then `"My App"`, because `this.appName` is overwritten ([sort of](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch5.md)) by `data` when the instance is created. We scope instance properties with `$` to avoid this. You can even use your own convention if you'd like, such as `$_appName` or `ΩappName`, to prevent even conflicts with plugins or future features. +Cela sera `"Le nom d'une autre app"`, puis `"Mon App"`, car `this.appName` est écrasée ([en quelques sortes](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch5.md)) par `data` quand l'instance est créée. Nous limitons la portée des propriétés avec `$` pour éviter ça. Vous pouvez même utiliser votre propre convention si vous préférez, comme `$_appName` ou `ΩappName`, pour en plus prévenir les conflits avec les plugins et les fonctionnalités futures. -## Real-World Example: Replacing Vue Resource with Axios +## Un exemple en situation réelle : Remplacer Vue Resource par Axios -Let's say you're replacing the [now-retired Vue Resource](https://medium.com/the-vue-point/retiring-vue-resource-871a82880af4). You really enjoyed accessing request methods through `this.$http` and you want to do the same thing with Axios instead. +Disons que vous remplacez le [maintenant déprécié Vue Resource](https://medium.com/the-vue-point/retiring-vue-resource-871a82880af4) ; vous aimiez vraiment accéder aux méthodes de requête avec `this.$http` et vous voulez faire la même chose avec Axios à la place. -All you have to do is include axios in your project: +Tout ce que vous avez à faire est inclure axios dans votre projet : ``` html @@ -76,13 +76,13 @@ All you have to do is include axios in your project: ``` -Alias `axios` to `Vue.prototype.$http`: +Puis assigner `axios` à `Vue.prototype.$http` : ``` js Vue.prototype.$http = axios ``` -Then you'll be able to use methods like `this.$http.get` in any Vue instance: +Alors vous serez capables d'utiliser des méthodes comme `this.$http.get` dans n'importe quelle instance de Vue : ``` js new Vue({ @@ -100,11 +100,11 @@ new Vue({ }) ``` -## The Context of Prototype Methods +## Le contexte des méthodes du prototype -In case you're not aware, methods added to a prototype in JavaScript gain the context of the instance. That means they can use `this` to access data, computed properties, methods, or anything else defined on the instance. +Au cas où vous ne seriez pas au courant, les méthodes ajoutées au prototype en JavaScript obtiennent le contexte de l'instance. Cela signifie qu'elles peuvent utiliser `this` pour accéder aux data, propriétés calculées, méthodes ou toute autre chose définie dans l'instance. -Let's take advantage of this in a `$reverseText` method: +Profitons de ceci dans une méthode `$reverseText` : ``` js Vue.prototype.$reverseText = function (propertyName) { @@ -113,7 +113,7 @@ Vue.prototype.$reverseText = function (propertyName) { new Vue({ data: { - message: 'Hello ' + message: 'Hello' }, created: function () { console.log(this.message) // => "Hello" @@ -123,7 +123,7 @@ new Vue({ }) ``` -Note that the context binding will __not__ work if you use an ES6/2015 arrow function, as they implicitly bind to their parent scope. That means the arrow function version: +Notez que la liaison du contexte ne fonctionnera __pas__ si vous utiliez une fonction fléchée ES6/2015, puisqu'elles gardent implicitement le contexte parent. Cela signifie que la version avec une fonction fléchée : ``` js Vue.prototype.$reverseText = propertyName => { @@ -131,37 +131,37 @@ Vue.prototype.$reverseText = propertyName => { } ``` -Would throw an error: +Rejettera une exception : ``` log Uncaught TypeError: Cannot read property 'split' of undefined ``` -## When To Avoid This Pattern +## Quand éviter ce *pattern* -As long as you're vigilant in scoping prototype properties, using this pattern is quite safe - as in, unlikely to produce bugs. +Tant que vous êtes vigilants sur la portée des propriétés du prototype, utiliser ce *pattern* est plutôt sûr - c'est-à-dire, peu probable de produire des bugs. -However, it can sometimes cause confusion with other developers. They might see `this.$http`, for example, and think, "Oh, I didn't know about this Vue feature!" Then they move to a different project and are confused when `this.$http` is undefined. Or, maybe they want to Google how to do something, but can't find results because they don't realize they're actually using Axios under an alias. +Cependant, il peut parfois semer la confusion auprès des autres développeurs. Ils peuvent voir `this.$http`, par exemple, et penser, "Oh, je ne savais pas qu'il s'agissait d'une fonctionnalité de Vue !". Ensuite ils vont sur un projet différent et sont confus quand `this.$http` est non défini. Ou alors ils cherchent sur Google comment faire quelque-chose, mais ne trouvent pas de résultats car ils ne réalisent pas qu'ils utilisent Axios sous un alias. -__The convenience comes at the cost of explicitness.__ When just looking at a component, it's impossible to tell where `$http` came from. Vue itself? A plugin? A coworker? +__C'est certes plus commode mais moins explicite.__ En regardant simplement un composant, il est impossible de dire d'où `$http` vient. Vue lui-même ? Un plugin ? Un collègue ? -So what are the alternatives? +Alors quelles sont les alternatives ? -## Alternative Patterns +## *Patterns* Alternatifs -### When Not Using a Module System +### Quand ne pas utiliser un système de modules -In applications with __no__ module system (e.g. via Webpack or Browserify), there's a pattern that's often used with _any_ JavaScript-enhanced frontend: a global `App` object. +Dans les applications __sans__ systèmes de modules (ex. via Webpack ou Browserify), il y a un *pattern* souvent utilisé dans _n'importe quel_ *frontend* amélioré en JavaScript : un objet global `App`. -If what you want to add has nothing to do with Vue specifically, this may be a good alternative to reach for. Here's an example: +Si ce que vous voulez ajouter n'a rien à voir avec Vue spécifiquement, cela peut être une bonne alternative à étudier. Voici un exemple : ``` js var App = Object.freeze({ - name: 'My App', + name: 'Mon App', description: '2.1.4', helpers: { - // This is a purely functional version of - // the $reverseText method we saw earlier + // Ceci est une version purement fonctionnelle + // de la méthode $reverseText décrite plus haut reverseText: function (text) { return text.split('').reverse().join('') } @@ -169,11 +169,11 @@ var App = Object.freeze({ }) ``` -If you raised an eyebrow at `Object.freeze`, what it does is prevent the object from being changed in the future. This essentially makes all its properties constants, protecting you from future state bugs.
+Si vous avez levé un sourcil à `Object.freeze`, cela sert à empêcher l'objet d'être modifié dans le futur. Il s'agit essentiellement de rendre toutes ses propriétés constantes, les protégeant de futurs bugs d'état.
-Now the source of these shared properties is much more obvious: there's an `App` object defined somewhere in the app. To find it, developers need only run a project-wide search. +Maintenant la source de ces propriétés partagées est bien plus évidente : il y a un objet `App` défini quelque-part dans l'application. Pour le trouver, les développeurs ont seulement besoin de rechercher la référence dans le projet. -Another advantage is that `App` can now be used _anywhere_ in your code, whether it's Vue-related or not. That includes attaching values directly to instance options, rather than having to enter a function to access properties on `this`: +Un autre avantage est que `App` peut maintenant être utilisé _n'importe où_ dans le code, qu'il soit lié à Vue ou non. Cela inclue les valeurs attachées directement aux options des instances, plutôt qu'avoir à entrer dans une fonction pour accéder aux propriétés avec `this` : ``` js new Vue({ @@ -186,8 +186,8 @@ new Vue({ }) ``` -### When Using a Module System +### Quand utiliser un système de modules -When you have access to a module system, you can easily organize shared code into modules, then `require`/`import` those modules wherever they're needed. This is the epitome of explicitness, because in each file you gain a list of dependencies. You know _exactly_ each one came from. +Quand vous avez accès à un système de modules, vous pouvez facilement organiser le code partagé à travers des modules, puis `require`/`import` ces modules partout où ils sont nécessaires. C'est l'approche la plus explicite car chaque fichier obtient alors une liste de dépendances. Vous savez _exactement_ d'où vient chacune d'entre elles. -While certainly more verbose, this approach is definitely the most maintainable, especially when working with other developers and/or building a large app. +Bien que certainement plus verbeux, cette approche est assurément la plus maintenable, particulièrement quand vous travaillez avec d'autres développeurs et/ou construisez une grosse application.