3

この構造を使用している Vue.js プロジェクトがたくさんあります。

├── main.js
├── api
│   └── index.js
│   └── services           #containing files with api-calls
│       ├── global.js
│       ├── cart.js
│       └── messages.js
├── components
│   ├── Home.vue
│   ├── Cart.vue
│   ├── Messages.vue
│   └── ...
└── store
    ├── store.js
    ├── actions.js  #actions to update vuex stores
    ├── types.js
    └── modules
        ├── global.js
        ├── cart.js
        └── ...

(この構造の例は「Jackblog」です。)

たとえば、VuexCart.vueのデータを更新したいとします。inCartそのために、カートは以下をインポートしactions.jsます。

import { inCart } from '../../store/actions'

APIに接続できるようにactions.js、API をインポートします。index.jsそして、Vuex ストアの値を更新します。

わかりました、それは私には明らかです。Messages.vueしかし今、私はモジュールに取り組みたいと思っています。このモジュールは、すべてのメッセージを取得するために API にも接続する必要がありますが、結果を Vuex に保存する必要はありません。データを必要とする唯一のコンポーネントは Messages.vue 自体であるため、コンポーネントdata()のみに保存する必要があります。

質問:アクションは Vuex を更新しないため、actions.js内部にインポートできません。Messages.vueしかし、ストアにデータを追加するすべてのファイルを store-directory に配置するロジックが壊れるため、 をディレクトリにactions.js移動することはできません。apiそれに加えて、ロジックは 内に配置する必要がありますMessages.vue。たとえば、API がエラーを返す場合、ローカルerror定数を設定する必要があります。したがって、別のファイルで処理することはできません。

API 呼び出しを行い、それらを vuex または local に保存するための推奨されるアプリケーション構造は何data()ですか? アクション ファイル、API ファイルなどを配置する場所は? Jackblog の例を見ると、Vuex データのみがサポートされています。両方をサポートするためにこれを再構築する方法は?

4

2 に答える 2

2

簡単な答え: Jackblog の例を考えてみましょう。コンポーネントから「api」をインポートし、API を直接使用するだけです。アクションをインポートしないでください。Messages.vue では、ストアのことは忘れてください。ストアに関連付けられているアクション レイヤーは必要ありません。API が必要なだけです。

長い答え: プロジェクトには次のものがあります

  1. remote文字列とオブジェクトの 2 つのパラメーターを受け取る関数 named を提供する Ajax ライブラリ ラッパー。文字列は何を達成しようとしているのか (例: "saveProductComment") を示し、オブジェクトはペイロード (サーバーに送信されるパラメーターの名前と値) です。

  2. 各アプリ モジュールには、上記の「文字列」をルート構成にマップする「 routes.js 」ファイルが含まれる場合があります。例えば：saveProductComment: 'POST api/v1/products/{product_id}/comment'

注: NodeJS または Webpack によって「モジュール」として扱われる単一またはファイルに対して「アプリ モジュール」という用語は使用していません。特定のドメインに関連するアプリ コードを含む完全なフォルダーを「アプリ モジュール」と呼んでいます (例: 「カート」モジュール、「アカウント」モジュール、「コメント」モジュールなど)。.js.vue

  1. どこからでも を呼び出すことができremote('saveProductComment', { product_id: 108, comment: 'Interesting!' })、それは を返しますPromise。ラッパーはルート構成を使用して適切なリクエストを作成し、レスポンスを解析してエラーを処理します。いずれにせよ、remote関数は常に を返しますPromise。

  2. 各アプリ モジュールは、モジュールに関連する初期状態、ミューテーション、アクション、およびゲッターを定義する独自のストア モジュールを提供する場合もあります。状態管理コードに「マネージャー」という用語を使用しています。たとえば、「コメント」を処理するストア モジュールを提供する「commentsManager.js」ファイルを作成できます。

  3. Manager では、remote関数を使用して Vuexアクション内で API 呼び出しを行います。リモートから Promise を返しますが、結果を処理するコールバックもアタッチします。コールバックでは、ミューテーション関数を呼び出して結果をコミットします。

newProductComment ({ commit }, { product, contents }) {
    return remote('saveProductComment', {
        product_id: product.id,
        comment: contents
    })
    .then(result => {
        commit('SOME_MUTATION', result.someProperty)
    })
}

ここで、Vuex コンテキストの外部で同じ API 呼び出しを使用したいが、コンポーネント内で直接使用したい場合は、Vue コンポーネント メソッドで同様のコードを使用するだけです。例えば：

export default {
    name: 'myComponent',
    data: () => ({
        contents: '',
        someData: null
    }),
    props: ['product'],
    methods: {
        saveComment () {
            remote('saveProductComment', {
                product_id: this.product.id,
                comment: this.contents
            })
            .then(result => {
                this.someData = result.someProperty
            })
        }
    }
}

アプリの構造に関して、私たちにとって本当に重要なことは次のとおりです。

  • アプリを個別の関心事に適切に分割する。「アプリ モジュール」と呼ばれるもの。特定のものごとに1つのモジュール

  • 各「アプリモジュール」のフォルダーを含む「モジュール」フォルダーがあります

  • 特定の「アプリ モジュール フォルダー」内には、ルート構成があり、リモート関数の最初のパラメーターをルート構成routes.jsにマッピングします。私たちのカスタム コードは、HTTP メソッドを選択し、URL を補間し、私たちのニーズに適切に適合するあらゆる種類の凝ったことを行います。ただし、アプリ コードの残りの部分では、次のように単純な方法で使用します。remote('stuffNeededToBeAccomplished', { dataToAccomplishTheNeed })

  • つまり、重い作業はマッピングと Ajax ライブラリ ラッパーにあります (実際の要求には任意の Ajax ライブラリを使用できます)。これは Vue / Vuex の使用とは完全に独立していることに注意してください

  • Vuex ストアもモジュールに分割されています。通常、アプリモジュールには、そこで定義されたルートを使用して、対応するストアモジュールがあります

  • メイン エントリ ポイントでは、アプリ モジュールをインポートします。各モジュールの index.js は、Ajax ラッパーのルートと Vuex のストア モジュールの両方の登録を処理します (したがって、Ajax でルートを使用可能にし、ストア モジュールを使用可能にするためにインポートするだけで、それ以上のアクションは必要ありません) Vuex で)

于 2016-11-28T13:50:40.603 に答える