Nuxt 3 がリリースされました！ https://nuxt.com/v3 で詳細について見れます。
翻訳されたページ このページのコンテンツは古い可能性があります。
原文を読む このページの翻訳を改善する

ストアディレクトリ

store ディレクトリには Vuex ストアに関するファイルが含まれています。Vuex ストアは Nuxt に付属していてすぐに使えますが、デフォルトでは無効化されています。このディレクトリ内に index.js ファイルを作成することで、ストアが有効化されます。

このディレクトリは追加の設定無しにリネームすることはできません。

ストアを使って状態を管理するのは、どういった大きなアプリケーションを作るにあたっても重要なことです。それがなぜ Nuxt がそのコアに Vuex を組み込んでいるかの理由です。

ストアを有効化する

Nuxt は store ディレクトリを確認します。もし隠しファイルや README.md ではないファイルが含まれていたら、ストアは有効化されます。これは Nuxt が以下を行うことを意味しています：

  1. Vuex をインポートする
  2. ルートの Vue インスタンスに store オプションを追加します。

モジュール

store ディレクトリの中にあるすべての .js ファイルは名前空間付きモジュール に変換されます（index はルートモジュールになります）。state の値は不必要に状態がサーバサイドで共有されてしまうことを避けるため、常に function であるべきです。

はじめに、ステートを関数で、ミューテーションとアクションをオブジェクトでエクスポートしましょう。

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

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

次に、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(state, todo) {
    todo.done = !todo.done
  }
}

ストアは以下のように生成されるでしょう：

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
        }
      }
    }
  }
})

また、pages/todos.vue では 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="What needs to be done?"></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>

モジュールメソッドはストアディレクトリにサブディレクトリを追加することなく、トップレベルでの定義に利用することができます。

ステートの例: 以下のように store/state.js を作成します。

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

対応するミューテーションは store/mutations.js に置くことができます

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

例のフォルダ構造

複雑なストア設定のファイル/フォルダ構造は次のようになります:

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

ストアでのプラグイン

store/index.js ファイルの中に置くことで、ストアにプラグインを追加することができます：

store/index.js
import myPlugin from 'myPlugin'

export const plugins = [myPlugin]

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

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

プラグインについてより詳細な情報はこちら: Vuex のドキュメント

nuxtServerInit アクション

ストアに nuxtServerInit アクションが定義されていて、かつ universal モードの場合、Nuxt はコンテキストを渡してこれを呼び出します（サーバサイドのみ）。これはサーバにある何らかのデータを直接クライアントサイドに渡すときに便利です。

例えば、サーバサイドにセッションがあり、req.session.user で接続したユーザにアクセスできるとしましょう。認証されたユーザをストアに渡すには、store/index.js を以下のように変更します：

store/index.js
actions: {
  nuxtServerInit ({ commit }, { req }) {
    if (req.session.user) {
      commit('user', req.session.user)
    }
  }
}
このアクションは受け取るのは（store/index.js 内の）プライマリモジュールだけです。ここから他のモジュールのアクションに呼び出しを繋いでいく必要があります。

コンテキスト は asyncData メソッドのように、nuxtServerInit の第 2 引数として渡されます。

nuxt generate が走った場合、nuxtServerInit は全ての動的に生成されたルートで実行されます。

非同期の nuxtServerInit アクションは、Promise を返すか async/await を利用して nuxt サーバが待機できるようにしなければなりません。
store/index.js
actions: {
  async nuxtServerInit({ dispatch }) {
    await dispatch('core/load')
  }
}

Vuex 厳格モード

厳格モードは dev モードではデフォルトで有効になっていて、production モードでは無効になっています。 厳格モードを dev モードでも無効化するには、store/index.js を下記の例に従ってください：

export const strict = false
このページをGitHubで編集する 更新日 Tue, Dec 6, 2022
Clément Ollivier Clément Ollivier Daniel Roe Daniel Roe Alex Hirzel Alex Hirzel Ajeet Chaulagain Ajeet Chaulagain René Eschke René Eschke Sébastien Chopin Sébastien Chopin Nico Devs Nico Devs Muhammad Muhammad Nazaré da Piedade Nazaré da Piedade Naoki Hamada Naoki Hamada Tom Tom Yann Aufray Yann Aufray Anthony Chu Anthony Chu Nuzhat Minhaz Nuzhat Minhaz Lucas Portet Lucas Portet Richard Schloss Richard Schloss Xanzhu Xanzhu bpy bpy Antony Konstantinidis Antony Konstantinidis Hibariya Hibariya Jose Seabra Jose Seabra Eze Eze Florian LEFEBVRE Florian LEFEBVRE Lucas Lucas Julien SEIXAS Julien SEIXAS Hugo Hugo Sylvain Marroufin Sylvain Marroufin Spencer Cooley Spencer Cooley Piotr Zatorski Piotr Zatorski Vladimir Semenov Vladimir Semenov Harry Allen Harry Allen kazuya kawaguchi kazuya kawaguchi Unai Mengual Unai Mengual Hyunseung Lee Hyunseung Lee Alexandre Chopin Alexandre Chopin pooya parsa pooya parsa Nick Medrano Nick Medrano Mosaab Emam Mosaab Emam Iljs Путлер Капут Iljs Путлер Капут Heitor Ramon Ribeiro Heitor Ramon Ribeiro Nero Nero Yoon Han Yoon Han Ikko Ashimine Ikko Ashimine FamCodings FamCodings Ayouli Ayouli F. Hinkelmann F. Hinkelmann felipesuri felipesuri Christophe Carvalho Vilas-Boas Christophe Carvalho Vilas-Boas Leoš Literák Leoš Literák Trizotti Trizotti Marcello Bachechi Marcello Bachechi Rodolphe Rodolphe Thomas Underwood Thomas Underwood Shek Evgeniy Shek Evgeniy Lukasz Formela Lukasz Formela Hugo Torzuoli Hugo Torzuoli