从突变

Question

我正试图通过变异将task推送到商店模块中的state.tasks变量数组。当我正在获取所有任务并将其分配给state.tasks时，一切正常并显示在屏幕上，但是当我将task推送到state.tasks商店时，并未将其添加到一个视图。（我通过console.log任务检查它被推送到state.tasks变异。没有错误）。 我在下面留下了信息。我做错了什么？

状态：

const state = {
    tasks: [],
};

操作： tasks是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'
            }),
        },

更新

在模块操作中tasks是api服务，我导入import tasks from '../../api/tasks'; 我也尝试state.tasks.pop()并且它有效，我认为这是因为输入数据不正确，但我再次检查它确实将它推送到state.tasks但是组件没有反应......

Answer 1

我会将任务设置为空数组，并且只允许<button class="tablink" onclick="openCity('News', this, '#0c0c0c')" id="defaultOpen"> <strong>News</strong> </button> <button class="tablink" onclick="openCity('Story', this, '#0c0c0c')"> <strong>Events</strong> </button> <button class="tablink" onclick="openCity('Guides', this, '#0c0c0c')"> <strong>Guides</strong> </button> 突变将任务添加到数组中。我已经重新创建了您的代码并且工作正常，但我没有使用传播createTask。

＆＃13;

＆＃13;

mapGetters

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;