如何使用快速路由器和 vuex 服务和操作添加用户（post 请求）

Question

在我的应用程序中，我正在创建一个模拟 API 并通过 Vuex 访问它来使用它。在快速路线中，我正在处理与发布请求（添加用户）相关的错误。现在，我无法理解如何将其传达给 Vuex 服务和操作。

表达routes.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。我需要了解那部分。

Answer 1

您可以将错误消息存储在 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>

如何使用快速路由器和 vuex 服务和操作添加用户（post 请求）

how to add user (post request) using express router and vuex service and actions

javascript

vue.js

vuex