javascript - Vue 和 Vuex 在 store 模块内进行 Axios 操作

Question

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

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

问题是当我为前任。

post something to my MongoDB database with Express server

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

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

当我发布/删除/更新时，有什么方法可以“触摸”状态以重新渲染组件吗？ bcs 组件不寻找硬刷新或将 fetchData() 放入 update() lifehook 中，而是每隔 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[] 并使用数组方法进行更改时，如何重新渲染组件。

Answer 1

在所提供的代码中，您没有在组件中获取刷新的数据，因为您没有正确执行突变。请参阅下面的代码:

 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),
};

更新

正如您在评论中提到的那样，您的数据可能会因嵌套数组等而变得更加复杂 - 我建议将逻辑替换为服务器。您应该在服务器上执行所有操作(更新、推送、删除)，然后仅返回更新的任务。那么你可以避免使用突变，除了一个:setTasks。