vuex用户自行重复而不是自我更新

Question

我有一个用户表和一种负责通过AXIO将其存储在数据库中的方法。

async saveUser({ commit }, user) {
            let createdUser;

            if (user.id) {
                createdUser = await http.put(`/users/${user.id}`, user);
                commit('addUser', createdUser.data);
            } else {
                createdUser = await http.post('/users', user);
                commit('addUser', createdUser.data);
            }
        },

添加一切都很好，但是在编辑用户而不是更新用户时，将添加使用更改的数据的副本。使用旧数据的用户仅在刷新页面时就会消失。

 mutations: {
    addUser(state, data) {
            state.users.unshift(data);
        },
}

我想找到一种消除重复的方法，以便立即更新用户

Answer 1

在您的操作方法中，尝试创建一种用于更新的方法。例如，

    mutations: {
      updateTask(state, payload) {
        let task = state.user.filter((userData) => userData.id == payload.id)[0];
        task.userId= payload.id;
      },
    }, 
    actions: {

    updateTask({ commit }, payload) {
      db.collection("userData")
        .doc({ id: payload.id })
        .update({
          userId: payload.id,
        })
        .then(() => {
          commit("updateTask", payload);
        });
    },
}

请确保您在“有效负载”中传递用户ID，然后使用Axios方法更新DB.Collection（）。希望你觉得这有用