web-dev-qa-db-ja.com

テンプレートからのアクセスvue vuex名前空間付きゲッター

私は_.vue_コンポーネントに次のようにvuex名前空間付きゲッターマッピングを作成しました：

_...mapGetters([
  'fooModule/barGetter'
])
_

.vueコンポーネントテンプレートでこのゲッターにアクセスするにはどうすればよいですか_{{fooModule.barGetter}}_を試してみましたが、動作しないようです。_{{fooModule/barGetter}}_は明らかに間違っています。

MapGettersでゲッターに別のキーを割り当てることができます

_...mapGetters({
    fooBarGetter: 'fooModule/barGetter'
})
_

これにより、_{{forBarGetter}}_を使用してテンプレートの値にアクセスできます

ただし、別のキーを割り当てずに_'fooModule/barGetter'_にアクセスする方法があるかどうか疑問に思っています。出来ますか？もしそうなら？

vue.jsvuejs2vuex
13
Mohamed Hussain

mapGettersの最初のパラメーターは名前空間にすることができます：

computed: {
    ...mapGetters("fooModule", [
        "barGetter"
    ]),
    ...mapGetters("anotherModule", [
        "someGetter"
    ])
}

これにより、テンプレートでthis.barGetterまたは単にbarGetterとして値を使用できるようになります。注：複数のmapGettersステートメントを含めることは完全に許容されます。

Vuex Gettersのドキュメント

35
matpie

まあ実際には'fooModule/barGetter'というキーの下に登録されていますが、これはJavaScript変数の有効な名前ではありません。したがって、キーには文字列としてアクセスする必要があります。しかし、あなたはまだそれを行うことができます、{{ _self['fooModule/barGetter'] }}を使用してテンプレートでそれにアクセスします。

この実用的な例を参照してください：

new Vue({
  el: '#app',
  store: new Vuex.Store({
    modules: {
      fooModule: {
        namespaced: true,
        state: {},
        getters: {
          barGetter() {
            return 'Hi :)';
          }
        }
      }
    }
  }),
  computed: Vuex.mapGetters([
    'fooModule/barGetter'
  ])
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]"></script>

<div id="app">
  {{ _self['fooModule/barGetter'] }}
</div>
1
Cobaltway

名前空間を最初のパラメーターとして指定せずにこれを実現したい人のために、object/mapをmapGettersにすでに名前付きのゲッターの名前 sで渡す可能性もあります。

...mapGetters({
    'activeItems': ACTIVE_ITEMS_GETTER_WITH_NAMESPACE
})

これは、ミューテーション、ゲッター、アクションの名前空間付きの名前を持つ定数がある場合に非常に役立ちます。私たちの場合、モジュールがたくさんあり、ゲッター、ミューテーション、アクションが含まれているモジュールを検索するのに時間がかかる場合があります。これが、定数に名前空間を追加する理由です。

1
Dawid Zbiński