API 데이터로 Vuex 상태를 업데이트할 위치

API 데이터로 Vuex 상태를 업데이트할 위치

이 질문은 코드 구성 질문에 가깝습니다.난 프런트엔드는 처음이야VueJS + Vuex + VuerRouter + Vuetify + TypeScript 를 탑재한 심플한 앱을 기동했습니다.이것은 의 그림입니다.src폴더:

├── App.vue
├── assets
│   └── ...
├── components
│   └── ...
├── plugins
│   └── ...
├── router
│   └── ...
├── services
│   └── StuffAPI.ts
├── store
│   ├── index.ts
│   └── modules
│       └── stuff.ts
└── views
    └── Stuff.vue

필요한 대부분의 데이터를 프리페치합니다.App.vue에mounted():

export default class extends Vue {
  listStuffs() {
    StuffAPI.list()
      .then((stuffs: Stuff[]) => {
        this.$store.dispatch("stuff/changeStuffs", stuffs);
      })
      .catch(e => {
        // ...
      });
  }

  mounted() {
    this.listStuffs();
  }
}
</script>

단, 컴포넌트가 서버측의 데이터를 변경하는 경우가 있습니다(리소스 작성 등).이제 서버에서 데이터를 다시 가져와야 합니다.단, 저는 이 파일을 복사하고 싶지 않습니다.listStuffs메서드를 사용합니다.그걸 어떻게 해결하죠?하위 구성 요소에서 상위 메서드를 호출할 수 없습니다.커스텀 이벤트를 사용해야 합니까?아니면 데이터를 가져오는 Vuex 액션을 수행해도 문제가 없습니까?

먼저 VueJ에서 'Mixins'를 사용할 수 있습니다. Mixins는 애플리케이션 컴포넌트 전체에서 동일한 기능을 사용할 수 있는 기능입니다.

두 번째로 Vuex를 사용할 수 있습니다.

1. 스토어를 만듭니다.(예: 커스텀)API.js)
2. 파일에 쓰기 게터, 돌연변이 및 작업
3. 컴포넌트의 액션을 호출합니다(예: 이것).$store.dispatch('StuffAPI').그러면()로 이동합니다.
4. 계속 음소거저장소의 API 결과
5. Getters를 사용하여 변환된 데이터 가져오기

참고로 아래 코드를 확인하십시오.

import * as types from '../types'
// Import axios or any http client

export const state = {
  isLoggedIn: false
}

export const getters = {
  isLoggedIn: state => state.isLoggedIn
}

export const mutations = {
  [types.MUTATE_LOGIN_FLAG]: (state, isLoggedIn) => {
    state.isLoggedIn = isLoggedIn
  }
}

export const actions = {

  AUTH_LOGIN: ({ commit }, payload) => {
    return new Promise((resolve, reject) => {
      // MY HTTP LOGIN REQUEST CODE HERE

    //   On result..
    commit(types.MUTATE_LOGIN_FLAG, true)
    })
  },

  AUTH_LOGOUT: ({ commit }, payload) => {
    return new Promise((resolve, reject) => {
    //  MY HTTP LOGOUT REQUEST CODE HERE

    // ... On result, 
    commit(types.MUTATE_LOGIN_FLAG, false)
    })
  }
}

이제 일부 컴포넌트에서 로그인 상태가 필요할 때마다 다음을 사용합니다.

this.$store.getters.isLoggedIn

그러면 True 또는 False가 반환됩니다.

로그인 또는 로그아웃이 필요할 때마다 다음을 사용합니다.

this.$store.dispatch('AUTH_LOGIN')

이러한 액션은 어플리케이션 내 어디에서나 호출할 수 있습니다.

주의: 이것은 구현의 예시입니다.스토어에 로그인 로그아웃을 실제로 쓰지 않습니다.d

언급URL : https://stackoverflow.com/questions/60699266/where-to-update-vuex-state-with-api-data