Express Router 및 vuex 서비스 및 액션을 사용하여 사용자를 추가하는 방법(사후 요청)

Express Router 및 vuex 서비스 및 액션을 사용하여 사용자를 추가하는 방법(사후 요청)

제 어플리케이션에서는 모의 API를 만들어 Vuex에서 접속하여 사용하고 있습니다.익스프레스 루트에서는, 투고 요구(사용자 추가)에 관한 에러를 처리하고 있습니다.Vuex 서비스 및 액션에 어떻게 전달해야 하는지 이해할 수 없습니다.

익스프레스 루트js

const router = require('express').Router();

// routing entrypoint

router.get('/users', (req, res) => {
  const data = require('./data/users.json');
  res.send(data);
});

router.post('/users', errorBoundaries, (req, res) => {
  const data = require('./data/users.json');
  res.status(200).send(data);
});

const errorBoundaries = (req, res, next) => {
  const { name } = req.body.name;
  const data = require('./data/users.422.json');
  if (name.length === 0) {
    return res.status(422).send(data);
  }
  // if string value is longer than 0, continue with next function in route
  next();
};

module.exports = router;

Vuex 서비스

// how to communicate - needs some example

/**
 * @param {*} data object
 */
export async function addUsers(data) {
  const response = await http.post('/users', data);
  return response;
}

Vuex 동작 및 돌연변이

  async addUserAction({ commit}, payload) {
       try {
         const resp = await service.addUsers({
         id: payload.id,
         firstName: payload.firstName,
         lastName: payload.lastName
        });
        commit('ADD_USERS',resp);
       } catch(error) {
        const message = error.response ? error.response.status : null;
        console.log(message);
      }
    }

users.json

{
  "data": [
    {
        "id": 1,
        "firstName": "John",
        "lastName": "Brown"
    },
    {
        "id": 2,
        "firstName": "Frank",
        "lastName": "Lister"
    }
  ]
}

Vuex를 사용하여 오류 처리를 추가하고 이를 UI로 전달해야 합니다.나는 그 부분을 이해해야 한다.

오류 메시지는 Vuex 상태로 저장할 수 있습니다.

const store = new Vuex.Store({
  state: {
    errorMessage: ''
  },
  mutations: {
    updateErrorMessage (state, newErrorMessage) {
      state.errorMessage = newErrorMessage
    }
  }
})

다음으로 'addActionUser'에서 커밋합니다.

async addUserAction({ commit}, payload) {
    try {
        const resp = await service.addUsers({
            id: payload.id,
            firstName: payload.firstName,
            lastName: payload.lastName
        });
        commit('ADD_USERS',resp);
    } catch(error) {
        const message = error.response ? error.response.status : null;
        console.log(message);
        commit('updateErrorMessage', message);
    }
}

그런 다음 계산된 속성을 관심 있는 구성요소에 추가합니다.

computed: {
    errorMessage() {
        return this.$store.state.errorMessage;
   }
}

그리고 오류 메시지가 있을 때 표시합니다.

<div class="error" v-if="errorMessage">
   <span>{{ errorMessage }}</span>
</div>

언급URL : https://stackoverflow.com/questions/66461038/how-to-add-user-post-request-using-express-router-and-vuex-service-and-actions