webentwicklung-frage-antwort-db.com.de

Vue 2 - vuex mapGetters und Pass-Parameter

Kann man mit mapGetters params übergeben?

Ich habe dies in der Haupt-Vue-Instanz:

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

this.search ist über v-model = "search = an das Eingabefeld gebunden, und in meiner Vuex-Instanz habe ich folgende Eigenschaften:

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

Dies funktioniert gut, aber ich versuche, einen Weg zu finden (wenn möglich), mapGetters zu verwenden und das Argument zu übergeben. Kann das gemacht werden?

6
Sasha

Das ist in der Tat möglich! mapGetters ordnet einfach this.yourGetterName diesem zu. $ store.getters.yourGetterName (siehe docs )

Um das zu erreichen, was Sie wollen:

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())
    }
  }
}
4
David Roberts

Dies ist der nächste Schritt, den Sie tun können, wenn Sie den Parameter an den Store übergeben möchten. Es wäre jedoch besser, den Parameter als Teil des Speichers zu erstellen und das Feld input als berechnete Eigenschaft mit entsprechendem Getter und Setter zum Aktualisieren des Status festzulegen. Und dann können Sie mapGetter verwenden, um die Ergebnisse zu erhalten.

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
kevguy