web-dev-qa-db-ja.com

ルータパラメータをVuexアクションに取り込む

ルーターのパラメーターをVuexアクションに渡したいのですが、次のような大きな形式ですべてのアクションに対してそれらをフェッチする必要はありません。

edit_sport_type({ rootState, state, commit }, event) {
  const sportName = rootState.route.params.sportName <-------
  const payload = {sportName, event}                 <-------
  commit(types.EDIT_SPORT_TYPE, payload)
},

またはそう、

edit_sport_type({ state, commit, getters }, event) {
  const payload = {sportName, getters.getSportName}  <-------
  commit(types.EDIT_SPORT_TYPE, payload)
},

あるいはさらに悪いことに、コンポーネントのプロップからパラメータを取得し、ディスパッチごとにディスパッチに渡します。

多数のアクションのセットに対してこれを抽象化する方法はありますか？

それとも、突然変異自体の中での代替アプローチですか？

javascriptfluxvue.jsvuex
8
softcode

vuexストアアクションからパラメータを取得するには、vue-routerのインスタンスをインポートしてから、 router.currentRoute オブジェクトを介してvuexストアからルーターインスタンスのパラメータにアクセスします。

以下のサンプル実装：

src/router/index.jsのルーター：

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

vuexストアでルーターをインポートします。

import router from '@/router'

次に、以下のように、vuexアクション関数（この場合は「id」）でパラメーターにアクセスします。

router.currentRoute.params.id
18
Cipto HD

あなたの質問をよく理解しているとは思いませんが、：
このプラグインは、ルーターの状態とストアの同期を維持します：
https://github.com/vuejs/vuex-router-sync

そしてそれはあなたが探しているもののように聞こえます。

2
nicolast

私の知る限り（そして私が取り組んでいるプロジェクトのためにこれを調べました）いいえ、ありません。これを行う最も簡単な方法は、ルートフェッチまたはサービスに対して実行したいことを抽象化して、それをvuexファイルで使用するか、モジュラーアプローチを使用する場合はactions.jsファイルにインポートすることです。

したがって、paramFetching.jsファイルは次のようになります。

export default {
  fetchRouteParams: function() {
    // do fetching
    // you should return a promise 
  }
}

次に、それをvuexにインポートします

import service from 'paramFetching.js'

そして、そのような行動をします

...
fetchParamsAction: function({commit}) {
  service.fetchRouteParams()
    .then( (response) => { // stuff gottten from service. you should o your commit here } )
    .catch( (error) => { // error handling } )
}

そして、このアクションをディスパッチすると、すべてがアクションで処理されます。したがって、それを残りのコードから分離します。これは単なる一般的な考えです。はっきりしないとごめんなさい。さらにサポートが必要な場合は、お問い合わせください。

0
peaceman