Page traduite Le contenu de cette page peut être déprécié.
Lire la page originale Contribuer à cette traduction

store

Le répertoire store contient vos fichiers Store pour Vuex . Le Store Vuex est livré avec Nuxt mais désactivé par défaut. La création d'un fichier index.js dans ce répertoire active le store.

Ce répertoire ne peut pas être renommé sans configuration supplémentaire.

L'utilisation du store pour gérer l'état est importante pour toute grande application. C'est pourquoi Nuxt implémente Vuex dans son noyau.

Activer le Store

Nuxt recherchera le répertoire store, s'il existe, il fera :

  1. L'importation de Vuex
  2. L'ajout de l'option store à la racine de l'instance Vue.

Modules

Chaque fichier .js dans le répertoire store est transformé en namespaced module (index étant le module racine). L'état state doit toujours être une fonction pour éviter les états partagés non désirés du côté du serveur.

Pour commencer, exportez l'état state en tant que fonction, et les mutations et actions en tant qu'objets.

store/index.js
export const state = () => ({
  counter: 0
})

export const mutations = {
  increment(state) {
    state.counter++
  }
}

Ensuite, vous pouvez avoir un fichier store/todos.js :

store/todos.js
export const state = () => ({
  list: []
})

export const mutations = {
  add(state, text) {
    state.list.push({
      text,
      done: false
    })
  },
  remove(state, { todo }) {
    state.list.splice(state.list.indexOf(todo), 1)
  },
  toggle(todo) {
    todo.done = !todo.done
  }
}

Le store sera créé en tant que tel :

new Vuex.Store({
  state: () => ({
    counter: 0
  }),
  mutations: {
    increment(state) {
      state.counter++
    }
  },
  modules: {
    todos: {
      namespaced: true,
      state: () => ({
        list: []
      }),
      mutations: {
        add(state, { text }) {
          state.list.push({
            text,
            done: false
          })
        },
        remove(state, { todo }) {
          state.list.splice(state.list.indexOf(todo), 1)
        },
        toggle(state, { todo }) {
          todo.done = !todo.done
        }
      }
    }
  }
})

Et dans votre pages/todos.vue, en utilisant le module todos :

pages/todos.vue
<template>
  <ul>
    <li v-for="todo in todos" :key="todo.text">
      <input :checked="todo.done" @change="toggle(todo)" type="checkbox">
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
    </li>
    <li><input @keyup.enter="addTodo" placeholder="Que faut-il faire ?"></li>
  </ul>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  computed: {
    todos () {
      return this.$store.state.todos.list
    }
  },
  methods: {
    addTodo (e) {
      this.$store.commit('todos/add', e.target.value)
      e.target.value = ''
    },
    ...mapMutations({
      toggle: 'todos/toggle'
    })
  }
}
</script>

<style>
.done {
  text-decoration: line-through;
}
</style>

La méthode des modules fonctionne également pour les définitions de haut niveau sans implémenter un sous-répertoire dans le répertoire store.

Exemple pour l'état state : nous créons un fichier store/state.js et nous ajoutons ce qui suit.

export default () => ({
  counter: 0
})

Et les mutations correspondantes peuvent se trouver dans le fichier store/mutations.js.

store/mutations.js
export default {
  increment(state) {
    state.counter++
  }
}

Exemple de structure de dossier

La structure des fichiers/dossiers de configuration du store pourrait ressembler à ceci :

 store/
--| index.js
--| ui.js
--| shop/
----| cart/
------| actions.js
------| getters.js
------| mutations.js
------| state.js
----| products/
------| mutations.js
------| state.js
------| itemsGroup1/
--------| state.js

Plugins dans le Store

Vous pouvez ajouter des plugins supplémentaires au store en les plaçant dans le fichier store/index.js :

store/index.js
import monPlugin from 'monPlugin'

export const plugins = [monPlugin]

export const state = () => ({
  counter: 0
})

export const mutations = {
  increment(state) {
    state.counter++
  }
}

Plus d'informations sur les plugins : Documentation Vuex .

L'action nuxtServerInit

Si l'action nuxtServerInit est définie dans le store et que le mode est universal, alors Nuxt l'appellera avec le contexte (uniquement du côté du serveur). C'est utile lorsque nous avons des données sur le serveur à passer directement au côté client.

Par exemple, disons que nous avons des sessions côté serveur et que nous pouvons accéder à l'utilisateur connecté par l'intermédiaire de req.session.user. Pour donner l'utilisateur authentifié à notre store, nous mettons à jour notre store/index.js comme suit :

store/index.js
actions: {
  nuxtServerInit ({ commit }, { req }) {
    if (req.session.user) {
      commit('user', req.session.user)
    }
  }
}
Seul le module principal (dans store/index.js) recevra cette action. Vous devrez enchaîner vos actions de module à partir de là.

Le contexte est donné à nuxtServerInit comme 2ème argument dans la méthode asyncData.

Si nuxt generate est lancé, nuxtServerInit sera exécuté pour chaque route dynamique générée.

Les actions asynchrones nuxtServerInit doivent retourner une Promesse ou utiliser async/await pour permettre au serveur nuxt de les attendre.
store/index.js
actions: {
  async nuxtServerInit({ dispatch }) {
    await dispatch('core/load')
  }
}

Vuex Strict Mode

Le mode strict est activé par défaut en mode développement et désactivé en mode production. Pour désactiver le mode strict en dev, suivez l'exemple ci-dessous dans store/index.js :

export const strict = false