J'écris une application dans Vue en utilisant Vuex comme gestion d'état.

Pour l'opération CRUD sur les données, j'utilise Axios.

Le problème, c'est quand je par ex.

publier quelque chose sur ma base de données MongoDB avec le serveur Express

(les deux sont temporaires seront remplacés plus tard) l'état dans Vuex n'est pas touché et le composant ne sera pas automatiquement restitué avec de nouvelles données. J'ai besoin de rafraîchir la page.

Mais avec un exemple comme celui-ci ci-dessous, je peux re-rendre le composant avec des mutations sur l'état, mais ce n'est pas le moyen parfait et préféré pour moi.

Existe-t-il un moyen de "toucher" l'état pour restituer le composant lorsque je publie/supprime/met à jour ? Ne cherchant pas à effectuer une actualisation matérielle ou à placer fetchData() dans le lifehook mis à jour(), le composant bcs demande de nouvelles données toutes les 100 ms.

Le code ci-dessous n'est pas le mien, mais il est super simple d'obtenir ce qu'il fait pour ce que je veux.

// 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
}

Edit : Pour le moment, ça ressemble à ça :

  • axios.get(tâche)
  • commit et "sauvegarde" les données dans state.tasks[]
  • lorsque le serveur axios.post(data) obtient des données et enregistre state.tasks[] restez intact, donc le composant ne s'affiche pas à nouveau avec de nouvelles données

Comment restituer le composant lorsque les données ont été enregistrées dans la base de données mais sans toucher state.tasks[] avec des mutations apportant des modifications avec les méthodes de tableau.

2
JavaScripter 6 févr. 2020 à 17:48

1 réponse

Meilleure réponse

Dans le code présenté, vous n'obtenez pas de données actualisées dans votre composant car vous ne faites pas correctement les mutations. Voir le code ci-dessous :

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

Mettre à jour

Comme vous l'avez mentionné dans les commentaires, vos données peuvent être plus complexes avec des tableaux imbriqués, etc., je suggère de remplacer la logique par le serveur. Vous devez tout faire sur votre serveur (update, push, delete), puis simplement renvoyer tasks mis à jour. Vous pouvez alors éviter d'utiliser des mutations à l'exception d'une : setTasks.

2
Daniyal Lukmanov 6 févr. 2020 à 16:56