javascript - Vue 和 Vuex 在 store 模块中做 Axios 操作

问题描述

我正在使用 Vuex 作为状态管理在 Vue 中编写一个应用程序。

我使用 Axios 对数据进行 CRUD 操作。

问题是当我换前任时。

使用 Express 服务器向我的 MongoDB 数据库发布内容

（两者都是临时的，稍后将被替换） Vuex 中的状态未被触及，组件不会自动重新渲染新数据。我需要刷新页面。

但是通过下面这样的示例，我可以重新渲染具有状态突变的组件，但这对我来说不是完美和首选的方式。

当我发布/删除/更新时，有什么方法可以“触摸”状态以重新渲染组件？不寻找硬刷新或将 fetchData() 放在 updated() lifehook 中，bcs 组件每 100 毫秒询问一次新数据。

下面的代码不是我的，但它超级直接地得到它正在做什么我想要的。

// Tasks module
import axios from 'axios';

const resource_uri = "http://localhost:3000/task/";

const state = {
    tasks: []
};

const getters = {
    allTasks: state => state.tasks
};

const actions = {
    async fetchTasks({ commit }) {
        const response = await axios.get(resource_uri);    
        commit('setTasks', response.data);
    },
    async addTask( { commit }, task) {
        const response = await axios.post(resource_uri, task);
        commit('newTask', response.data);
    },
    async updateTask( { commit }, task) {
        const response = await axios.put(`${resource_uri}${task.id}`, task);
        commit('updTask', response.data);
    },
    async removeTask( { commit }, task) {
        const response = await axios.delete(`${resource_uri}${task.id}`);
        commit('deleteTask', task);
    }
};

const mutations = {
    setTasks: (state, tasks) => state.tasks = tasks,
    newTask: (state, task) => state.tasks.unshift(task),
    updTask: (state, updatedTask) => {
        const index = state.tasks.findIndex(t => t.id === updatedTask.id);
        if(index !== -1) {
            state.tasks.splice(index, 1, updatedTask);
        }        
    },
    deleteTask: (state, task) => state.tasks = state.tasks.filter(t => task.id !== t.id),
};

export default {
    state, getters, actions, mutations
}

编辑：现在它看起来像这样：

axios.get(任务)
提交并“保存”数据state.tasks[]
当axios.post(data)服务器获取数据并保存时state.tasks[]保持不变，因此组件不会使用新数据重新渲染

当数据已保存在数据库中但不涉及state.tasks[]使用数组方法进行更改的突变时，如何重新渲染组件。

标签： javascriptvue.jsaxiosvuex

在提供的代码中，您没有在组件中获得刷新的数据，因为您没有正确地进行突变。请看下面的代码：

 const mutations = {
    setTasks: (state, tasks) => state.tasks = tasks,
    newTask: (state, task) => state.tasks = [task, ...state.tasks],
    updTask: (state, updatedTask) => {
        let tasks = [...state.tasks];
        const index = tasks.findIndex(t => t.id === updatedTask.id);
        if(index !== -1) {
            tasks.splice(index, 1, updatedTask);
        }
        state.tasks = [...tasks];
    },
    // deleteTask should work correctly
    deleteTask: (state, task) => state.tasks = state.tasks.filter(t => task.id !== t.id),
};

更新

正如您在评论中提到的，您的数据可以使用嵌套数组等更复杂 - 我建议将逻辑替换为服务器。您应该在您的服务器 ( update, push, delete) 上执行所有操作，然后返回 updated tasks。然后你可以避免使用突变 exept one: setTasks。

javascript - Vue 和 Vuex 在 store 模块中做 Axios 操作

问题描述

解决方案

推荐阅读