Question

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

要对数据进行CRUD操作，请使用Axios。

问题是我当前。

使用Express服务器将某些内容发布到我的MongoDB数据库中

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

但是在下面的例子中，我可以重新渲染状态发生变化的组件，但这对我来说并不是一种理想的方法。

在执行发布/删除/更新时，是否有任何方法可以“触摸”状态以重新渲染组件？不希望硬刷新或将fetchData（）放在updated（）生命周期中，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[]并使用数组方法进行更改的突变时，如何重新呈现组件。

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

更新

正如您在注释中提到的那样，使用嵌套数组等可以使数据更复杂-我建议将逻辑替换为服务器。您应该在服务器上进行所有操作（update，push，delete），然后只返回更新后的tasks。然后，您可以避免使用第一种变异：setTasks。

Vue和Vuex在存储模块内部进行Axios操作

1 个答案: