問題タブ [vuex]

コンポーネントから $route.params.post にデータを渡そうとしていますが、どこかで失敗しており、それを機能させる方法がわかりません。

私のコンポーネントrouter-linkでは、ルートファイルの特定のパスに移動するために使用していますが、指定されたコンポーネントにルーティングしていません。

ボタンをクリックすると、次のようなルートで Replies コンポーネントが開きますが/replies/#、空白のページが読み込まれ、コンポーネントが完全に無視されるだけです。にインポートvuex-router-syncしていますが、それが問題かどうかはわかりませんが、正しくmain.js使用しているかどうか完全に確信が持てないため、問題がある可能性があることは十分承知しています。vuex-router-sync

Vue 2.x と Vuex 2.x で Web アプリを作成しています。http 呼び出しを介してリモートの場所から情報を取得しています。その呼び出しが失敗した場合は、他のページにリダイレクトする必要があります。

しかしthis.$router.push({path:"/"})、次のエラーが表示されます。

Uncaught (in promise) TypeError: 未定義のプロパティ 'push' を読み取れません

どうすればこれを達成できますか。

シミュレートされた JsFiddle:こちら

動的に読み込まれたフィルタリング値を多数使用して、フィルタリング メカニズムを実現しようとしています。たとえば、私が得ることを意味しますdata

それから私のテンプレートで

私は次のようなことを試しました：

と

他のコンポーネントがモデルを変更する可能性があるため、ストアにモデルが必要です。

問題は、どのキーが何個来るかわからないため、次のようなものは適合しないことです

編集：理解を深めるために

API呼び出しから、話し言葉やスキルなどの多くのメタデータを持つ多くの人を取得すると想像してください。同じAPI呼び出しで、利用可能な言語を取得します。私がやりたいことは、話すことができる言語に基づいて人をフィルタリングすることです。

しかし、いくつの言語が、どの言語が来るかはわかりません。

だから私がやろうとしているのは、各言語のチェックボックスの VUEX ステートを動的に作成することです。さらに、v-model にバインドするために、同じ言語用に計算された変数などを作成する必要があります。@change で vuex-state を変更できます。

編集：私が今まで持っているもの

// コンポーネントの使用

<filter-checkbox storeKey="language" :values="facets.languages" id_prefix="language_"></filter-checkbox>

そしてグローバルストアで

「this.$store.registerModule」の部分は、動的に生成された VUEX 状態で部分を解決しようとしただけで、使い方がよくわかりません。

現在、新しい Vue.js アプリケーションに取り組んでいます。バックエンド データベースへの API 呼び出しに大きく依存しています。

コンポーネント間の共有データを管理するため、多くの場合に Vuex ストアを使用します。github で他の Vue プロジェクトを見ると、すべてのアクション、状態などを処理するファイルを含む特別な vuex ディレクトリが表示されます。そのため、コンポーネントが API を呼び出す必要がある場合、vuex ディレクトリのアクション ファイルが含まれます。

しかし、たとえばメッセージの場合、これらのデータは 1 つの特定のビューでのみ重要であるため、Vuex を使用したくありません。ここでコンポーネント固有のデータを使用したいと思います。しかし、ここに私の問題があります: 私はまだ自分の API を照会する必要があります。しかし、Vuex アクション ファイルを含めるべきではありません。そのため、新しいアクション ファイルを作成する必要があります。このようにして、vuex と単一コンポーネントの API アクションを含む特定のファイルを作成します。

これをどのように構成すればよいですか？vuex データとコンポーネント固有のデータの両方のアクションを処理する新しいディレクトリ 'api' を作成しますか? それとも分ける？

この構造を使用している Vue.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 データのみがサポートされています。両方をサポートするためにこれを再構築する方法は?

私は次のようにリストをループしています:

アイテムがアクティブかどうかを確認するために、計算された関数である isActive を実行して、パスが Vuex ストアにあるブレッドクラム パスと等しいかどうかを確認します。

問題は、li を独自のコンポーネントとして設定していないため、計算された関数内で item.nextPath にアクセスできないことです。実際の項目を isActive 関数に渡してそのプロパティを取得する方法はありますか?

私は以下のゲッターを持っています:

コンポーネントでは、この getter から派生した計算されたプロパティ:

返される値は、ラップトップ配列内の要素を変更するまでは正しいです。その後、ゲッターは更新されません。