Skip to content

Traduction de migration-vuex.md #96

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 11, 2017
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 29 additions & 29 deletions src/v2/guide/migration-vuex.md
Original file line number Diff line number Diff line change
@@ -1,93 +1,93 @@
---
title: Migration from Vuex 0.6.x to 1.0 (En)
title: Migration depuis Vuex 0.6.x à 1.0
type: guide
order: 28
---

> Vuex 2.0 is released, but this guide only covers the migration to 1.0? Is that a typo? Also, it looks like Vuex 1.0 and 2.0 were released simultaneously. What's going on? Which one should I use and what's compatible with Vue 2.0?
> Vuex 2.0 est sorti, mais ce guide ne couvre que la migration vers la version 1.0 ? C'est une erreur ? En fait, Vuex 1.0 et 2.0 sont sortis simultanément. Ça veut dire quoi ? Lequel dois-je utiliser et lesquels sont compatibles avec Vue 2.0 ?

<p class="tip">**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).**</p><p>Both Vuex 1.0 and 2.0:</p>
Pour Vuex 1.0 et 2.0 :

- fully support both Vue 1.0 and 2.0
- will be maintained for the foreseeable future
- le support de Vue 1.0 et 2.0 est total,
- ils seront maintenus à cours et moyen terme.

They have slightly different target users however.
Ils ciblent cependant des utilisateurs légèrement différents.

__Vuex 2.0__ is a radical redesign and simplification of the API, for those who are starting new projects or want to be on the cutting edge of client-side state management. __It is not covered by this migration guide__, so you should check out [the Vuex 2.0 docs](https://vuex.vuejs.org/en/index.html) if you'd like to learn more about it.
__Vuex 2.0__ est complètement revisité et son API est simplifiée. Parfait pour ceux qui commencent de nouveaux projets ou qui veulent être à la pointe de la gestion d'état côté client. __Il n'est pas couvert par ce guide de migration__ et vous devez donc vous tourner vers [la documentation Vuex 2.0](https://vuex.vuejs.org/fr/index.html) si vous souhaitez en apprendre plus à son sujet.

__Vuex 1.0__ is mostly backwards-compatible, so requires very few changes to upgrade. It is recommended for those with large existing codebases or who just want the smoothest possible upgrade path to Vue 2.0. This guide is dedicated to facilitating that process, but only includes migration notes. For the complete usage guide, see [the Vuex 1.0 docs](https://github.com/vuejs/vuex/tree/1.0/docs/en).
__Vuex 1.0__ est en partie compatible avec ses versions antérieurs, il requiert vraiment peu de changement pour être mis à jour. Il est recommandé pour les grandes bases de code ou pour ceux qui souhaitent migrer lentement vers Vue 2.0. Ce guide est réalisé pour faciliter cette tâche mais n'inclut que des notes de migration. Pour le guide complet d'utilisation, consultez [la documentation Vuex 1.0](https://github.com/vuejs/vuex/tree/1.0/docs/en).

## `store.watch` with String Property Path <sup>replaced</sup>
## `store.watch` avec chemin en propriété <sup>remplacée</sup>

`store.watch` now only accept functions. So for example, you would have to replace:
`store.watch` n'accepte plus que des fonctions. Donc par exemple, vous devrez remplacer :

``` js
store.watch('user.notifications', callback)
```

with:
par :

``` js
store.watch(
// When the returned result changes...
// Quand le résultat retourné change...
function (state) {
return state.user.notifications
},
// Run this callback
// Lancer cette fonction de rappel
callback
)
```

This gives you more complete control over the reactive properties you'd like to watch.
Cela vous donne un contrôle plus complet sur les propriétés réactives que vous souhaitez observer.

{% raw %}
<div class="upgrade-path">
<h4>Upgrade Path</h4>
<p>Run the <a href="https://github.com/vuejs/vue-migration-helper">migration helper</a> on your codebase to find examples of <code>store.watch</code> with a string as the first argument.</p>
<h4>Comment procéder ?</h4>
<p>Lancez l'<a href="https://github.com/vuejs/vue-migration-helper">outil d'aide à la migration</a> sur votre code pour trouver tous les exemples de <code>store.watch</code> avec une chaîne de caractère comme premier argument.</p>
</div>
{% endraw %}

## Store's Event Emitter <sup>removed</sup>
## Émetteur d'évènement du Store <sup>supprimé</sup>

The store instance no longer exposes the event emitter interface (`on`, `off`, `emit`). If you were previously using the store as a global event bus, [see this section](migration.html#dispatch-and-broadcast-removed) for migration instructions.
L'instance du store n'expose plus l'interface d'émetteur d'évènement (`on`, `off`, `emit`). Si vous utilisiez précédemment le store comme un canal global d'évènement, [consultez cette section](migration.html#dispatch-et-broadcast-remplaces) pour des instructions de migration.

Instead of using this interface to watch events emitted by the store itself (e.g. `store.on('mutation', callback)`), a new method `store.subscribe` is introduced. Typical usage inside a plugin would be:
Au lieu d'utiliser cette interface pour observer les émetteurs d'évènement dans le store lui-même (par ex. `store.on('mutation', callback)`), une nouvelle méthode `store.subscribe` a été introduite. L'utilisation typique dans un plugin serait :

``` js
var myPlugin = store => {
store.subscribe(function (mutation, state) {
// Do something...
// Faire quelque chose...
})
}

```

See example [the plugins docs](https://github.com/vuejs/vuex/blob/1.0/docs/en/plugins.md) for more info.
Consultez comme exemple [la documentation des plugins](https://github.com/vuejs/vuex/blob/1.0/docs/en/plugins.md) pour plus d'informations.

{% raw %}
<div class="upgrade-path">
<h4>Upgrade Path</h4>
<p>Run the <a href="https://github.com/vuejs/vue-migration-helper">migration helper</a> on your codebase to find examples of <code>store.on</code>, <code>store.off</code>, and <code>store.emit</code>.</p>
<h4>Comment procéder ?</h4>
<p>Lancez l'<a href="https://github.com/vuejs/vue-migration-helper">outil d'aide à la migration</a> sur votre code pour trouver tous les exemples de <code>store.on</code>, <code>store.off</code> et <code>store.emit</code>.</p>
</div>
{% endraw %}

## Middlewares <sup>replaced</sup>
## Middlewares <sup>remplacés</sup>

Middlewares are replaced by plugins. A plugin is simply a function that receives the store as the only argument, and can listen to the mutation event on the store:
Les middlewares sont remplacés par les plugins. Un plugin est une simple fonction qui fournit le store comme seul argument et qui peut écouter les mutations d'évènement sur le store :

``` js
const myPlugins = store => {
store.subscribe('mutation', (mutation, state) => {
// Do something...
// Faire quelque chose...
})
}
```

For more details, see [the plugins docs](https://github.com/vuejs/vuex/blob/1.0/docs/en/plugins.md).
Pour plus de détails, consultez [la documentation des plugins](https://github.com/vuejs/vuex/blob/1.0/docs/en/plugins.md).

{% raw %}
<div class="upgrade-path">
<h4>Upgrade Path</h4>
<p>Run the <a href="https://github.com/vuejs/vue-migration-helper">migration helper</a> on your codebase to find examples of the <code>middlewares</code> option on a store.</p>
<h4>Comment procéder ?</h4>
<p>Lancez l'<a href="https://github.com/vuejs/vue-migration-helper">outil d'aide à la migration</a> sur votre code pour trouver tous les exemples de l'option <code>middlewares</code> sur un store.</p>
</div>
{% endraw %}