博客

Error: [vuex] do not mutate vuex store state outside mutation handlers.

报错原因：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

vuex也很贴心的提供了严格模式，来控制是否提示不规范的store值修改。

开启了严格模式之后，若在mutation外修改值，也能动态渲染到页面上，只是vue会有警告提示。

我的使用场景：

vuex统一保存接口请求的数据，我在mutation中调用接口给state数据赋值

解决方案：

以下参考官方文档： https://vuex.vuejs.org/zh/guide/mutations.html

在 mutation 中混合异步调用会导致你的程序很难调试。例如，当你调用了两个包含异步回调的 mutation 来改变状态，你怎么知道什么时候回调和哪个先回调呢？这就是为什么我们要区分这两个概念。在 Vuex 中，mutation 都是同步事务

异步请求不能在Mutation 中进行，异步请求放在Actions中，Mutation 必须是同步函数！！

store文件中的 test.js代码示例如下：

import * as types from './mutation-types';
import api from '../apis/orderList';
export const state = () => ({
  test: '111',
  defeatList: []
});

export const getters = {};

export const actions = {
  changeNum ({ commit }, Num) {
    commit('change_num', Num);
  },
  getDefeatList ({ commit }, params) {
    api.getDefeatList(params).then(res => {
      if (res && res.data) {
        let List = res.data;
        commit(types.GET_DEFEATLIST, List);
      }
    });
  }
};

export const mutations = {
  change_num (state, Num) {
    state.test = Num;
  },
  [types.GET_DEFEATLIST] (state, List) {
    state.defeatList = List;
  }
};

组件中调用：

<template>
	<a-table
		:columns="columns"
		:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
		:data-source="defeatList"
		:scroll="{ x: 1500 }"
		:pagination="paginationProps"
		:row-key="record => record.carNumber"
	 ></a-table>
</template>
computed: {
    test () {
      return this.$store.state.orderlist.test;
    },
    defeatList () {
      return this.$store.state.orderlist.defeatList;
    }
 },
methods: {
	initList () {
      let params = {
        pageNum: 1,
        ...this.form
      };
      this.$store.dispatch("test/getDefeatList", params); //模块化用具名： 模块名/该文件下的Action函数名
    },
}

参考

https://juejin.cn/post/6844903903146819597