Vuexの特徴：お店のことを本当に考えるなら知っておくべきこと

それが理由だ。 店舗 はとても便利になった。React＋Reduxを使うか、それとも Vue + Vuex - 主な目的は同じである。 データの構造化、アクセス、安全性の維持.

この記事では、Vuexストアをクリーンで効率的な状態に保つためのいくつかの例を紹介しよう。

始める前に、こう仮定してみよう：

• あなたは現代的な経験を持っている JavaScript,
• あなたは基本的に、Vueが何なのか、どのように使うのかを知っている。 小道具, を計算した、 等々、
• Vuexはご存知ですよね？行動, のような変異がある、 など）、アプリをより良いものにしたいと考えている。

Vuex大半のコアのように Vueプロジェクト公式ドキュメントには多くの便利なハックが掲載されている。私たちはその中からいくつかの重要な情報を抜粋しました。

基本的なVuexストアの実装は以下のようになる：

// main.js

import Vue from 'vue'
import Vuex from 'vuex'
import App from "./App"；

Vue.use(Vuex)

const store = new Vuex.Store((
  state: (
    data: null；
  ),
  アクション: (
      someAction: (( commit ), data) (
          コミット("SOME_MUTATION", data)；
      )
  ),
  ミューテーション： (
    SOME_MUTATION (state, data) (
        state.data = data；
    )
  ))
));

新しいVue((
  el："#app"、
  render: h => h(App)、
  ストア
));

通常、アプリが大きくなると、ルーティングやグローバル・ディレクティブ、プラグインなどを適用しなければならない。それによって main.js ファイルが長くなり、読みにくくなる。このように、ストアを外部ファイルに保存しておくのは良い習慣だ：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)；

const state = (
    data: null；
);

const actions = (
    someAction: (( commit ), data) (
        commit("SOME_MUTATION", data)；
    )
);

constミューテーション = (
    SOME_MUTATION (state, data) (
        state.data = data；
    )
);

export default new Vuex.Store((
    state、
    アクション
    変異
));

1.モジュール

となったら、どうすればいいのだろう。 ストア ファイルが巨大化し、作業が困難になる？実は、とてもクールなVuexの機能がある。 モジュール.これらは、データを別々のファイルに分割する専用です。

例えば、あなたが企業アプリに携わっていて、そのアプリにはいくつかのドメインのデータがあるとしよう：

• ユーザー（すべての権限とパーミッションの管理）、
• ルートパラメータ(APIへのリクエスト前にグローバルパラメータを管理する)
• 売上（SalesMegaChartコンポーネントが月次/四半期/年次で表示される場合）、
• 注文（SalesMegaChartバーをクリックすると表示されます）。

...そして、おそらくもっと。これで、あなたの店にモジュール性を導入する重大な理由ができたことになる。

まず ストア ファイルを新しく作成した 店舗 ディレクトリに移動し、名前を インデックス.js.オプションとして、すべてをモジュールにまとめたい場合は、以下を削除します。 状態, 行動 そして 突然変異 メインファイルから。

// store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)；

export default new Vuex.Store((
    modules: (
        // モジュールはここに置く
    )
));

次に、`store/index.js` ファイルの隣に、最初のモジュール `store/user.js` を作成する。

import ApiService from '../services/api.service'；

const state = (
    loggedIn: false、
    loginError: null、
    user: null
);

const actions = (
    login: 非同期 (( commit ), data) (
        try (
            const response = await ApiService.post('/login', data)；
            const ( user ) = response.data；

            COMMIT("SAVE_USER", user)；
            commit("login_success")；
        ) catch (error) (
            コミット("LOGIN_ERROR", error)；
        )
    )
);

コンスタント・ミューテーション = (
    SAVE_USER (state, user) (
        state.user = user；
    ),

    LOGIN_SUCCESS (state) (
        state.loggedIn = true；
    ),

    LOGIN_ERROR (state, error) (
        state.loginError = error；
        state.loggedIn = false；
    )
);

export const user (
    state、
    アクション
    変異
)

そして、メインの`store/index.js`ファイルにreadyモジュールをロードする：

import Vue from 'vue'
import Vuex from 'vuex'
import ( user ) from './user'；

Vue.use(Vuex)；

export default new Vuex.Store((
    モジュール: (
        ユーザー
    )
));

おめでとう！これで本当に見栄えのするストアの実装ができました。また、コンポーネントからデータにアクセスすることもできます（例． ユーザープロファイル.vue)のようなものだ：

<template>
    <div class="user-profile">
        <h2>(( user.name ))！</h2>
        <!-- component template goes here -->
    </div>
</template>

<script> import ( mapActions ) from 'Vuex';

    export default (
        name: 'UserProfile',

        computed: mapState((
            user: state => state.user
            // user: 'user' <-- alternative syntax
        ))
    )
</script>

2.名前空間

モジュールの使い方がわかったところで、Vuex の 名前空間処理.前のステップで store/user.js ファイルを ユーザー モジュールである。

で定義されたデータ構造である。 ユーザー ファイルはコンポーネントからアクセス可能ですが、すべての ユーザー データは直接グローバルな 状態 コンテクストのようにね：

computed: mapState((
    user: state => state.user
    // user：'user' <-- 別の方法
))

さらにモジュールを定義していくと、どのオブジェクトがどのモジュールから来たのかわからなくなってしまうだろう。それなら、名前空間付きモジュールを使い、このように定義するべきだ：

export const user (
    namespaced: true, // <-- namespacing！
    の状態、
    アクション、
    変異
)

これからは ユーザー データ (状態 変数 store/user.js ファイル)は ステート.ユーザー を参照されたい：

computed: mapState((
    user: state => state.user.user
    // user：user/user' <-- 別の方法
))

数ステップ後、次のようなコンポーネントができる：

import ( mapActions ) from 'Vuex'；

エクスポート default (
    name: 'Dashboard'、

    computed: mapState((
        sales: 'sales/data'、
        orders: 'orders/data'、
        sortBy: 'orders/sortBy'、
        loggedIn: 'user/loggedIn'
    )),

    methods: mapActions((
        logout：'user/logout'、
        loadSales: 'sales/load'、
        loadOrders: 'orders/load'
    )),

    created() (
        if (this.loggedIn) (
            loadSales()；
            loadOrders()；
        )
    )
)

ブラボー！とても新鮮で、とてもクリーンだ...しかし、心配しないで、リファクタリングに終わりはない。次のステップの準備はいいかい？

3.モジュール間の通信

最初のステップで、私はあなたがいくつかのアクションを示した。 ユーザー モジュールである：

const actions = (
    ログイン: 非同期 (( commit ), data) (
        try (
            const response = await ApiService.post('/login', data)；
            const ( user ) = response.data；

            COMMIT("SAVE_USER", user)；
            commit("login_success")；
        ) catch (error) (
            コミット("LOGIN_ERROR", error)；
        )
    )
);

失敗した場合は、ログインエラーをストアに追加します。

ここにはいくつかの選択肢があり、どの選択肢が自分のニーズに合っているかによって選ぶことになる。最もシンプルな方法は ブイエフ ディレクティブのおかげで、ストアにエラーがある場合にエラーメッセージを表示することができます。

<template>
    <div class="dashboard">
        <!-- dashboard component template -->
        <div
            v-if="error"
            class="error-message"
        > (( error.message )) </div>
    </div>
</template>
<script> import ( mapActions ) from 'Vuex';

export default (
    name: 'Dashboard',

    computed: mapState((
        error: "user/loginError"
    ))
)
</script>

ここでも、多くのモジュールがあり、それぞれのモジュールが トライ/キャッチ 構文は、あなたのストアに新しいエラーを生成する。明らかに、この方法ではDRYルールを乱用することになる。

エラー処理プロセスをより汎用的にするには？

を定義しよう。 一般的 モジュールに、グローバルに使用されるロジックを入れた。

// store/common.js

const state = (
    エラー：[]
);

const actions = (
    error: (
        root: true、
        ハンドラ(( commit ), error) (
            commit("ERROR", error)；
        )
    )
),

constミューテーション = (
    ERROR (state, error) (
        /* こうすることで、最新のエラーがリストの先頭に来るようになる */
        state.errors = [error, ...state.errors]；
    ))
);

export const common (
    namespaced: true、
    state、
    変異
)

を適応させることができる。 ユーザー モジュール（他のモジュールも同様）：

try (
    // 何らかのアクション
) catch (error) (
    commit("common/ERROR", error, ( root: true ))；
)

あるいは、よりエレガントな方法として、グローバルアクションを使うこともできます：

try (
    // 何らかのアクション
) catch (error) (
    dispatch("error", error)；
)

この構文は コミット そして 派遣 コールは自明のことのように思えるが、これらのトリックについてもっと読むことができる。 これ.

すべてのエラーを一カ所にまとめておけば、それを簡単にあなたの ダッシュボード コンポーネントを使用している：

computed: mapState((
    errors：'common/errors'
)),

watch: (
    /* これは "common/ERROR "変異のたびに呼び出され、新しいエラーだけをひとつずつストアに追加していく */
    errors() (
        this.showErrorMessage(this.errors[0])；
    )
)

前の例では 一般的 モジュールのエラー処理はすでに効率的なソリューションだが、さらに進化させることができる。

ご覧のように、我々は 共通/エラー 配列をストアに追加します。このような場合、特定の突然変異に対する何らかのアクションを決定する必要があるときには Vuexプラグイン あるいは高次コンポーネント（HOC）である。

次回はプラグインとHOCについて説明します。その間に、このエントリーを読んでいただきありがとうございます。私たちが用意した例を楽しんでいただければ幸いです。

この調子でコーディングを続けてくれ！

続きを読む

– Vue.jsアプリを改善するには？実用的なヒント

– GraphQL: プロダクションでの教訓

– Shopify、Spree、それともSolidus？Ruby on RailsがEコマース開発をお手伝いできる理由をご覧ください。