Vue 2 - vuex map Getters 및 패스 파라미터

Vue 2 - vuex map Getters 및 패스 파라미터

mapGetters를 사용하여 파라미터를 전달할 수 있습니까?

메인 Vue 인스턴스에는 다음이 있습니다.

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

this.search는 v-model="search=를 통해 입력 필드에 바인딩되며 Vuex 인스턴스에는 다음과 같은 getter가 있습니다.

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

이것은 정상적으로 동작하고 있습니다만, mapGetters를 사용하여 인수를 전달할 수 있는 방법을 찾고 있습니다.할 수 있을까?

이것은 확실히 할 수 있다! mapGetters는 간단히 이것을 맵한다.yourGetterName을 클릭합니다.$store.getters.yourGetterName(문서 참조)

원하는 것을 달성하려면:

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())
    }
  }
}

파라미터가 스토어에 전달되도록 하려면 이 방법이 가장 가깝습니다.단, 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>

언급URL : https://stackoverflow.com/questions/45437585/vue-2-vuex-mapgetters-and-pass-params