Vue и Vuex делает работу Ax ios внутри модуля магазина - PullRequest
Новая
       5

Vue и Vuex делает работу Ax ios внутри модуля магазина

1 голос
/ 06 февраля 2020

Я пишу приложение в Vue, используя Vuex в качестве управления состоянием.

Для операции CRUD на данных я использую Ax ios.

Проблема в том, когда я для ex.

отправить что-то в мою базу данных MongoDB с Express server

(оба временно будут заменены позже), состояние в Vuex не затрагивается, и компонент не будет автоматически повторно с новыми данными. Мне нужно обновить страницу sh.

Но на примере, подобном приведенному ниже, я могу сделать рендеринг компонента с мутациями состояния, но для меня это не идеальный и предпочтительный способ.

Есть ли какой-нибудь способ «коснуться» состояния для повторного рендеринга компонента, когда я выполняю публикацию / удаление / обновление? Не требуя жесткого refre sh или размещения 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
}

Редактировать: сейчас это выглядит так:

  • ax ios .get (task)
  • commit and " сохранить данные в state.tasks[]
  • , когда сервер axios.post(data) получает данные, и сохранить state.tasks[] не трогать, чтобы компонент не перерисовывал с новыми данными

Как перерисовать компонент, когда данные были сохранены в базе данных, но не касаясь state.tasks[] мутациями, вносящими изменения в методы массива.

1 Ответ

1 голос
/ 06 февраля 2020

В представленном коде вы не получаете обновленные данные в вашем компоненте, потому что вы делаете мутации не правильно. См. Код ниже: 

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

Обновление

Как вы упомянули в комментариях, что ваши данные могут быть более сложными с вложенными массивами и т. Д., Я предлагаю замени логи c на сервер. Вы должны сделать все на своем сервере (update, push, delete) и затем просто вернуть обновленный tasks. Тогда вы можете избежать использования мутаций, кроме одной: setTasks.

...