Vuex踩坑之改变state Error: [vuex] do not mutate vuex store state outside mutation handlers.

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

• • • 参考

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！