선택한 값 전달: 메소드에서 vuex 구현 메소드를 사용하십시오.

Question

Vuex를 사용하여 FilterStatus 메서드에서 선택 값을 전달하려고 했지만 선택 옵션 값이 메서드에 전달되지 않습니다.

이것은 내 구성요소인 FilterStatus.vue입니다. v-model을 사용하여 옵션 값을 저장하고 useStore를 사용하여 상태

<템플릿>
  <div class="필터">
    <v-model="필터" 선택>
        <옵션 값="">모두</option>
        <option value="살아있다">살아있다</option>
        <옵션 값="죽음">죽음</option>
        <옵션 값="알 수 없음">알 수 없음</option>
    </선택>
  </div>
</템플릿>

<스크립트>
    'vuex'에서 { useStore } 가져오기

    기본값 내보내기 {
    설정() {
        const 저장소 = useStore()

        const 필터 = ((상태) => {
          store.dispatch('filterStatus', 상태)
        })

        반품 {
        필터
        }
    }
}

</스크립트>

<스타일>


<p>이 부분에서는 Vuex를 사용했고 작업에는 filterStatus 메소드가 있습니다</p>
<pre class="brush:php;toolbar:false;">'vuex'에서 { createStore } 가져오기

기본 createStore({
  상태: {
    문자: [],
    문자필터: []
  },
  돌연변이: {
    setCharacters(상태, 페이로드) {
      state.characters = 페이로드
    },
    setCharactersFilter(상태, 페이로드) {
      state.charactersFilter = 페이로드
    }
  },
  작업: {
    비동기 getCharacters( {commit} ) {
      노력하다 {
        const res = 가져오기 대기('https://rickandmortyapi.com/api/character')
        const 데이터 = res.json()을 기다립니다.
        커밋('setCharacters', data.results)
        커밋('setCharactersFilter', data.results)
      } 잡기(오류) {
        console.log(오류)
      }
    },
    filterStatus({커밋, 상태}, 상태) {
      const 필터 = state.characters.filter( (문자) => {
        반환 문자.상태.포함(상태)
      })
      커밋('setCharactersFilter', 필터)
    }
  },
  모듈: {
  }
})

도와주셔서 진심으로 감사드립니다

Answer 1

v-model에는 함수가 아닌 데이터 변수가 주어져야 합니다. Vue 3에서는 ref或reactive반응 상태를 생성하려면 를 사용하여 이 변수를 선언해야 합니다. 예를 들면 다음과 같습니다.

으아악

이제 선택기의 v-model로 설정하면 filter将保存所选选项的值。然后，你需要做的第二件事是使用“on change”事件监听器响应选择的变化，这样每次filter업데이트되면 vuex 스토어에 커밋할 수 있습니다.

으아악 으아악