2017-08-01 19 views
3

でパラメーターを渡すことはできますか?ゲッターVモデルを介して入力フィールドにバインドされthis.searchVue 2 - vuex mapゲッターとパスパラメーター

computed: { 
    filterAuthors() { 
     return this.$store.getters.filterAuthors(this.search.toLowerCase()); 
    } 
} 

は= "を検索=、と私Vuexインスタンスで私はこのゲッターを持っている:

私は、メインのVueのインスタンスでこれを持っています:

getters: { 
    filterAuthors: (state) => (search) => { 
     return state.authors.filter((author) => { 
      return author.name.toLowerCase().indexOf(search) >= 0; 
     }) 
    } 
}, 

この1つは正常に動作しているが、私は(それが可能な場合)mapGettersを使用すると、引数を渡す方法を見つけようとしていますこれを行うことができます

。?

答えて

0

これは、paramをストアに渡す場合に最も近い方法です。しかし、それを処理する方が良いのは、ストアの一部としてparamを作成し、inputフィールドを対応するgetterとsetterを持つ計算されたプロパティとして設定して状態を更新することです。そして、mapGetterを使って結果を得ることができます。

const { mapGetters } = Vuex 
 

 
const authorsInput = [{ name: 'Stephen King'}, { name: 'Neal Stephenson'}, { name: 'Tina Fey'}, { name: 'Amy Poehler'}, { name: 'David Foster Wallace'}, { name: 'Dan Brown'}, { name: 'Mark Twain'}] 
 

 
const store = new Vuex.Store({ 
 
    state: { 
 
    srchInput: '', 
 
    authors: authorsInput 
 
    }, 
 
    getters: { 
 
    filteredAuthors: (state) => state.authors 
 
     .filter((author) => author 
 
     .name 
 
     .toLowerCase() 
 
     .indexOf(state.srchInput.toLowerCase()) >= 0) 
 
     .map((author) => author.name) 
 
    }, 
 
    mutations: { 
 
    UPDATE_SRCH_INPUT: (state, input) => state.srchInput = input 
 
    }, 
 
}) 
 

 
new Vue({ 
 
    el: '#app', 
 
    store, 
 
    computed: Object.assign({ 
 
    srchInput: { 
 
     get() { return store.state.srchInput}, 
 
     set (val) { store.commit('UPDATE_SRCH_INPUT', val) } 
 
    } 
 
    }, mapGetters([ 
 
    'filteredAuthors' 
 
    ])) 
 
})
filterAuthors: (state) => (search) => { 
 
     return state.authors.filter((author) => { 
 
      return author.name.toLowerCase().indexOf(search) >= 0; 
 
     }) 
 
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.3.1/vuex.js"></script> 
 
<div id="app"> 
 
<div> 
 
    <input type="text" v-model="srchInput"/> 
 
    <ul> 
 
     <li v-for="author in filteredAuthors">{{author}}</li> 
 
    </ul> 
 
    </div> 
 
</div>

1

これは、実際に行うことができます! mapGettersは、単にこれにthis.yourGetterNameをマップ$ store.getters.yourGetterName(docsを参照)

だから、あなたが望むものを達成するために:。

import { mapGetters } from 'vuex' 

export default { 
    // ... the rest of your Vue instance/component 
    computed: { 
    // Mix your getter(s) into computed with the object spread operator 
    ...mapGetters([ 
     'filteredAuthors' 
     // ... 
    ]), 
    // Create another computed property to call your mapped getter while passing the argument 
    filteredAuthorsBySearch() { 
     return this.filteredAuthors(this.search.toLowerCase()) 
    } 
    } 
} 
関連する問題