Vuex 스토어에 게터 추가하기

6540 단어 programmingjavascriptvuewebdev
https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

Vue.js는 대화형 프론트 엔드 앱을 개발하는 데 사용할 수 있는 사용하기 쉬운 웹 앱 프레임워크입니다.

Vuex를 사용하면 Vue 앱의 상태를 중앙 위치에 저장할 수 있습니다.

이 기사에서는 다른 스토어 상태에서 파생된 상태를 추가하기 위해 Vuex 스토어에 getter를 추가하는 방법을 살펴보겠습니다.

우리 스토어에 게터 추가하기



다음과 같이 getters 속성을 추가하여 Vuex 스토어에 getter를 추가할 수 있습니다.
index.js :

const store = new Vuex.Store({  
  state: {  
    todos: [  
      { id: 1, text: "todo1", done: true },  
      { id: 2, text: "todo2", done: false }  
    ]  
  },  
  getters: {  
    doneTodos: state => {  
      return state.todos.filter(todo => todo.done);  
    }  
  }  
});

new Vue({  
  el: "#app",  
  store,  
  computed: {  
    doneTodos() {  
      return this.$store.getters.doneTodos;  
    },  
    ...Vuex.mapState({  
      todos: "todos"  
    })  
  }  
});

index.html :

<!DOCTYPE html>  
<html>  
  <head>  
    <title>App</title>  
    <meta charset="UTF-8" />  
    <script src="https://unpkg.com/vue/dist/vue.js"></script>  
    <script src="https://unpkg.com/vuex"></script>  
  </head>  
  <body>  
    <div id="app">  
      <div>  
        <p>Todos:</p>  
        <div v-for="todo of todos">{{todo.text}}</div>  
        <p>Done Todos:</p>  
        <div v-for="todo of doneTodos">{{todo.text}}</div>  
      </div>  
    </div>  
    <script src="index.js"></script>  
  </body>  
</html>


코드에는 getters 개체가 있습니다.

getters: {  
  doneTodos: state => {  
    return state.todos.filter(todo => todo.done);  
  }  
}

todos 상태에서 상태를 파생합니다.

그런 다음 다음과 같이 작성하여 doneTodos getter에 액세스했습니다.

computed: {  
  doneTodos() {  
    return this.$store.getters.doneTodos;  
  },  
  ...Vuex.mapState({  
    todos: "todos"  
  })  
}


Vue 인스턴스에서.

그런 다음 항목이 템플릿에서 렌더링되고 다음을 얻습니다.

Todos:todo1  
todo2  
Done Todos:todo1


표시됩니다.

메서드 스타일 액세스



하나 이상의 인수가 있는 구성 요소에서 getter를 호출할 수 있도록 getter 함수에서 함수를 반환할 수 있습니다.

예를 들어 ID로 할 일을 가져오는 getter를 만들고 싶다면 다음과 같이 작성할 수 있습니다.
index.js :

const store = new Vuex.Store({  
  state: {  
    todos: [  
      { id: 1, text: "todo1", done: true },  
      { id: 2, text: "todo2", done: false }  
    ]  
  },  
  getters: {  
    getTodoById: state => id => {  
      return state.todos.find(todo => todo.id === id);  
    }  
  }  
});

new Vue({  
  el: "#app",  
  store,  
  computed: Vuex.mapState({  
    todos: "todos"  
  }),  
  methods: {  
    getTodoById(id) {  
      return this.$store.getters.getTodoById(id);  
    }  
  }  
});

index.html :

<!DOCTYPE html>  
<html>  
  <head>  
    <title>App</title>  
    <meta charset="UTF-8" />  
    <script src="https://unpkg.com/vue/dist/vue.js"></script>  
    <script src="https://unpkg.com/vuex"></script>  
  </head>  
  <body>  
    <div id="app">  
      {{getTodoById(1).text}}  
    </div>  
    <script src="index.js"></script>  
  </body>  
</html>


그런 다음 화면에 todo1가 표시됩니다.

getter를 정의하는 다음 코드가 있습니다.

getters: {  
  getTodoById: state => id => {  
    return state.todos.find(todo => todo.id === id);  
  }  
}


위의 코드는 함수를 반환한 다음 주어진 ID로 할 일을 반환합니다.

그런 다음 다음과 같이 getTodoById 메서드를 정의하여 Vue 인스턴스에서 액세스합니다.

getTodoById(id) {  
  return this.$store.getters.getTodoById(id);  
}


마지막으로 다음과 같이 작성하여 템플릿에서 렌더링합니다.

{{getTodoById(1).text}}


mapGetters 도우미


mapGetters 도우미를 사용하여 다음과 같이 getter를 계산된 속성에 매핑할 수 있습니다.
index.js :

const store = new Vuex.Store({  
  state: {  
    todos: [  
      { id: 1, text: "todo1", done: true },  
      { id: 2, text: "todo2", done: false }  
    ]  
  },  
  getters: {  
    doneTodosCount: state => {  
      return state.todos.filter(todo => todo.done).length;  
    }  
  }  
});

new Vue({  
  el: "#app",  
  store,  
  computed: Vuex.mapGetters(["doneTodosCount"])  
});

index.html :

<!DOCTYPE html>  
<html>  
  <head>  
    <title>App</title>  
    <meta charset="UTF-8" />  
    <script src="https://unpkg.com/vue/dist/vue.j"></script>  
    <script src="https://unpkg.com/vuex"></script>  
  </head>  
  <body>  
    <div id="app">  
      {{doneTodosCount}}  
    </div>  
    <script src="index.js"></script>  
  </body>  
</html>


그런 다음 doneTodosCount getter를 다음과 같은 이름을 가진 계산된 속성에 매핑했기 때문에 1이 표시됩니다.

computed: Vuex.mapGetters(["doneTodosCount"])


결론



getter를 사용하여 다른 상태에서 파생된 상태를 추가할 수 있습니다.

getter를 정의하기 위해 getters 속성에 상태에서 파생된 것을 반환하는 메서드 또는 상태에서 파생된 함수를 추가합니다.

구성 요소에 포함하려면 this.$store.getters 메서드를 사용하거나 mapGetters 메서드를 사용할 수 있습니다.
type vs interface
[Python] __init__

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage