변환에서 푸시할 때 Vuex 저장소에서 구성 요소 컬렉션을 업데이트하지 않음

변환에서 푸시할 때 Vuex 저장소에서 구성 요소 컬렉션을 업데이트하지 않음

밀려고 해task로.state.tasks변수 배열은 변환을 통해 저장 모듈에 있습니다.모든 작업을 가져와 할당하는 경우state.tasks모든 것이 완벽하게 작동하고 화면에 표시되지만task에 대해서state.tasks스토어에서 뷰에 추가하지 않습니다.(console.log 태스크가 state.tasks로 변환되어 있는 것을 console.log 태스크에서 확인했습니다.에러는 없습니다).아래에 정보를 남겼습니다.내가 뭘 잘못하고 있지?

상태:

const state = {
    tasks: [],
};

액션:그tasksImport하는 API 서비스입니다.import tasks from '../../api/tasks';

const actions = {
    getTasks({commit}) {
        return new Promise((resolve, reject) => {
            tasks.getTasks().then(response => {
                commit('setTasks', response.data.data);
                resolve(response);
            }).catch(error => {
                reject(error);
            })
        });
    },

    createTask({commit}, text) {
        return new Promise((resolve, reject) => {
            tasks.createTask(text).then(response => {
                commit('createTask', response.data.data);
                resolve(response);
            }).catch(error => {
                reject(error);
            })
        });
    }
};

변환:

const mutations = {
    setTasks(state, tasks) {
        state.tasks = tasks;
    },
    createTask(state, task) {
        state.tasks.push(task);
        console.log(state.tasks);
    }
};

취득자:

const getters = {
    undoneTasks(state) {
        return state.tasks.filter(task => task.done == false);
    },
    doneTasks(state) {
        return state.tasks.filter(task => task.done == true);
    }
};

구성 요소:

mounted() {
            store.dispatch('getTasks').catch(error => {
                if (error.response) {
                    this.checkResponse(error.response.status);
                }
            });
        },

methods: {
        createTask() {
            store.dispatch('createTask', this.taskText)
                .then(() => {
                    this.taskText = '';
                }).catch(error => {
                if (error.response) {
                    this.checkResponse(error.response.status);
                }
            });
        }
 },
computed: {
            ...mapGetters({
                tasks: 'undoneTasks'
            }),
        },

갱신필

모듈 동작 중tasksImport하는 API 서비스입니다.import tasks from '../../api/tasks';나도 노력했어state.tasks.pop()잘못된 수신 데이터 때문인 줄 알았는데 다시 확인해보니 정말 state.tasks 하지만 컴포넌트가 반응하지 않습니다.

좋아, 얘들아, 내가 알아냈어모든 지원과 답변에 감사드립니다.그래서 저는 수동으로 Push in mutation 객체를 설정해 보았습니다.

createTask(state, task) {
        const taskObj = {id: task.id, text: task.text, done: false};
        state.tasks.push(taskObj);
    }

그리고 성공했어요, 문제는done이 필드는 서버에서 null로 수신되었습니다.vuex에 대한 정보를 더 읽어봐야 할 것 같은데, 너무 이상해요...

작업을 빈 어레이로 설정하고, 우선 작업을 빈 어레이로 설정하고,createTask변환: 작업을 배열에 추가합니다.코드를 다시 작성했습니다만, spread를 사용하고 있지 않습니다.mapGetters.

const store = new Vuex.Store({
	state: {
  	tasks: [],
  },
  actions: {
  	createTask({commit}, task) {
    	return new Promise((res, rej) => {
      	setTimeout(() => {
        	commit('createTask', task);
          res(true);
        }, 1000);
      });
    },
  },
  mutations: {
  	createTask(state, task) {
    	state.tasks.push(task);
    },
  },
  getters: {
  	undoneTasks: state => state.tasks.filter(t => t.done === false),
  },
});

new Vue({
  el: "#app",
  store,
  data: {
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  },
  computed: {
  	tasks() {
    	return this.$store.getters.undoneTasks;
    }
  },
  created() {
  	this.$store.dispatch('createTask', { text: "Learn JavaScript", done: false });
    this.$store.dispatch('createTask', { text: "Learn Vue", done: false });
    setTimeout(() => 
  	[{ text: "Play around in JSFiddle", done: false },
     { text: "Build something awesome", done: false }].map(t => this.$store.dispatch('createTask', t)), 1000);
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <h2>Todos:</h2>
  <ol>
    <li v-for="todo in tasks">
      <label>
        <input type="checkbox"
          v-on:change="toggle(todo)"
          v-bind:checked="todo.done">

        <del v-if="todo.done">
          {{ todo.text }}
        </del>
        <span v-else>
          {{ todo.text }}
        </span>
      </label>
    </li>
  </ol>
</div>

언급URL : https://stackoverflow.com/questions/50310009/vuex-store-does-not-update-component-collection-when-pushing-from-mutation