Question

因此讨论了很多主题，但是找不到我的问题的解决方法，代码似乎非常简单

视图：

<task v-for="(item, index) in tasks" v-bind:item="item" v-bind:index="index" v-bind:key="item.id"> </task>

<script>
import { mapGetters } from 'vuex';
import task from 'task.component.vue';
export default {
  components: {
    task,
  },
  computed: {
    ...mapGetters(['tasks']),
  },
  created() {
    this.$store.dispatch('getTasks');
  },
};
</script>

商店：

const getters = {
  tasks: state => state.tasks,
};

const actions = {
  getTasks: async ({ commit }) => {
    try {
      const res = await axios(....);
      commit('tasks_success', res.data.data);
    } catch (err) {
      ...
    }
  },
};

const mutations = {
  tasks_success(state, data) {
    state.tasks = data;
  },
};

const state = {
  tasks: [],
};

export default {
  state,
  getters,
  actions,
  mutations,
};

一个组件： <template><div>{{item.description}} </div> </template>

<script>
/**
 * Export default
 */
export default {
  name: 'task',
  props: ['item'],
};
</script>

我尝试了几次，这对我来说似乎是最简单的，但是我仍然遇到此错误：

vue.runtime.esm.js？2b0e：619 [Vue警告]：监视程序的回调发生错误“ function（）{return this._data。$$ state}”：“错误：[vuex]不对vuex进行突变将状态存储在变异处理程序之外。”

vue.runtime.esm.js？2b0e：1888错误：[vuex]不会在变异处理程序之外对vuex存储状态进行变异。

一切正常，但是我想了解，如果有人有主意：/，请确保它是关于异步等待和创建的？

V-bind，v-for，组件，道具，吸气剂：请勿更改vuex存储状态

0 个答案: