programing

Vuex 필터 상태

minecode 2022. 8. 25. 23:21
반응형

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

반응형