반응형
Vuex 필터 상태
Vuejs Vuex의 첫 번째 앱입니다.상태를 필터링하는 최선의 방법을 찾을 수 없습니다.
store/index.displaces
state: {
projects: []
},
mutations: {
SET_PROJECT_LIST: (state, { list }) => {
state.projects = list
}
},
actions: {
LOAD_PROJECT_LIST: function ({ commit }) {
axios.get('projects').then((response) => {
commit('SET_PROJECT_LIST', { list: response.data})
}, (err) => {
console.log(err)
})
}
}
컴포넌트:
computed: {
...mapState({
projects
})
}
이 시점에서 저는 제 프로젝트 목록을 가지고 있습니다.좋아!
이제 다음과 같이 프로젝트를 필터링하는 버튼을 추가했습니다.활성 프로젝트, 유형 프로젝트...
프로젝트 오브젝트(this.projects)를 조작하려면 어떻게 해야 합니까?
다른 한 명과 함께this.$store.dispatch
다른 getters 기능
상태를 바꾸지 않고 국가를 조작할 수 있나요?
좀 헷갈리네요.
Vuex에 입력된 목록에 있는 필터의 예를 들어 보겠습니다.
편집: 저도 그렇게 하려고 했어요.
this.$store.getters.activeProjects()
하지만 어떻게 업데이트하지?프로젝트?
activeProjects(){
this.projects = this.$store.getters.activeProjects()
}
동작하지 않는다
원래 상태를 그대로 유지하고 "getters"를 사용하여 데이터를 필터링할 것을 권장합니다.
실제로 공식 문서에는 모든 "완료" 작업을 수행하는 방법에 대한 예가 포함되어 있습니다.도움이 될 수 있습니다.
const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
}
}
})
Getters 레퍼런스: https://vuex.vuejs.org/en/getters.html
행운을 빕니다.
언급URL : https://stackoverflow.com/questions/47818557/vuex-filter-state
반응형
'programing' 카테고리의 다른 글
Store.js의 플러그인(VeValidate) 사용 (0) | 2022.08.25 |
---|---|
OS X 10.9에 Java 설치(Mavericks) (0) | 2022.08.25 |
REST API - DTO 여부 (0) | 2022.08.25 |
Vue.js 2: sass/scss에서 사용할 수 없는 범위 스타일 (0) | 2022.08.25 |
각 요소를 슬롯에 랩하려면 어떻게 해야 하나요? (0) | 2022.08.25 |