Vue 및 Vuex가 스토어 모듈 내부에서 Axios 작업을 수행함

Vue 및 Vuex가 스토어 모듈 내부에서 Axios 작업을 수행함

나는 Vue에서 Vuex를 국가 관리로 사용하는 앱을 쓰고 있어.

데이터에서 CRUD 작업을 수행하려면 Axios를 사용하십시오.

문제는 내가 전남편일 때야.

Express 서버를 사용하여 MongoDB 데이터베이스에 게시

(둘 다 나중에 임시로 교체됨) Vuex의 상태는 건드리지 않으며 구성 요소가 새 데이터로 자동 갱신되지 않는다.페이지를 새로 고쳐야겠어.

하지만 아래의 예를 들자면, 이 부품은 주(州)에서 돌연변이로 다시 렌더링할 수 있지만, 그게 나한테는 완벽하고 선호되는 방법은 아니에요.

포스트/삭제/업데이트를 할 때 상태를 "터치"하여 구성 요소를 다시 렌더링할 수 있는 방법이 있는가?하드 리프레시를 찾거나 fetchData()를 업데이트된() 라이프 후크 내부에 배치하지 않고 bcs 구성 요소는 100ms마다 새로운 데이터를 요청한다.

아래 코드는 내 것이 아니라 내가 원하는 것을 얻기 위한 초직접 코드다.

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

편집: 지금 이 화면은 다음과 같다.

• acios.get(get)
• 데이터를 커밋하고 "저장"하다state.tasks[]
• 할 때axios.post(data)서버가 데이터 가져오기 및 저장state.tasks[]구성 요소가 새 데이터로 재조정되지 않도록 손상되지 않은 상태로 유지

데이터를 데이터베이스에 저장했지만 만지지 않은 상태에서 구성 요소를 다시 렌더링하는 방법state.tasks[]배열 방식으로 변경되는 돌연변이.

표시된 코드에서 올바르게 돌연변이를 수행하지 못하기 때문에 구성 요소의 데이터를 새로 고치지 마십시오.아래 코드를 참조하십시오.

 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.

참조URL: https://stackoverflow.com/questions/60097640/vue-and-vuex-making-axios-operation-inside-store-module