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

    代码如下：
    数据格式

    1. let shortCutKeyData =  [
    2.   {
    3.     key: 1,
    4.     name: this.$t("info.setup.stopRun"),
    5.     keyboard: 'ctrl+R'
    6.   },
    7.   {
    8.     key: 2,
    9.     name: this.$t("info.setup.stepRun"),
    10.     keyboard: 'ctrl + shift + R'
    11.   },
    12.   { 
    13.     key: 3,
    14.     name: this.$t("info.setup.copy"),
    15.     keyboard: 'ctrl+C'
    16.   },
    17.   { 
    18.     key: 4,
    19.     name: this.$t("info.setup.delCom"),
    20.     keyboard: 'ctrl+D'
    21.   },
    22.   {
    23.     key: 5,
    24.     name: this.$t("info.setup.compile"),
    25.     keyboard: 'ctrl+B'
    26.   },
    27.   //{ key: 6, name: '多步编译',keyboard: 'ctrl+V' },
    28. ]

    vue文件中的逻辑
    setupDialog.vue

    1.  //改变键盘输入
    2. shortCutKeyChange(index,val) {
    3.   this.$store.commit('SAVE_SHORTCUTKEY',this.shortCutKeyData);
    4. },

    setup.js

    1. //顶部菜单 设置模块
    2. let state = {
    3.     //技能路径
    4.     skillUrl: '',
    5.     //初始化快捷键的数据
    6.     shortCutKeyData: [
    7.         { key: 1, name: "运行",keyboard: 'ctrl+R'},
    8.         { key: 2, name: "单步运行",keyboard: 'ctrl + shift + R' },
    9.         { key: 3, name: '复制',keyboard: 'ctrl+C'},
    10.         { key: 4, name: '删除',keyboard: 'ctrl+D' },
    11.         { key: 5, name: '编译',keyboard: 'ctrl+B' },
    12.         //{ key: 6, name: '多步编译',keyboard: 'ctrl+V' },
    13.     ],
    14.     //捕获开关
    15.     captureSwitchVal: '',
    16. }
    18. const mutations = {
    19.     //保存技能的路径
    20.     SAVE_SKILL_URL: (state,skill) => {
    21.        state.skillUrl = skill;
    22.     },
    23.     //保存快捷键的数据
    24.     SAVE_SHORTCUTKEY: (state,data) => {
    25.         state.shortCutKeyData = data;
    26.     },
    27.     //保存捕获开关的数据
    28.     SAVE_CAPTURESWITCH: (state,val) => {
    29.         state.captureSwitchVal = val;
    30.     }
    31. }
    33. const actions = {
    35. }
    37. export default {
    38.     state,
    39.     mutations,
    40.     actions
    41. }

    如果我用上面的方式，每次commit整个数组就会报错，如果我们换一种方式就可以解决当前报错的问题。
    解决方案如下：
    setupDialog.vue

    1. //保存快捷键的数据
    2. SAVE_SHORTCUTKEY: (state,data) => {
    3.   state.shortCutKeyData[data.idx].keyboard = data.keyboard;
    4. },

    setup.js

    1. //改变键盘输入
    2. shortCutKeyChange(index,val) {
    3.   this.$store.commit('SAVE_SHORTCUTKEY',{idx :index, keyboard:val});
    4. },