Error: vuex do not mutate vuex store state outside mutation handlers Even with const passed to mutation

问题

as advise by @skirtle on another same problem, used const to mutate my state but get error. to be more clear, my state is an empty array, it will be filled the first time, but i get the error if i even try to change my select!!! let alone send another mutation!! so i think if i fill my state before this, (in case of editing my product), i'll get the error the on first try too. here is the codes:

<template>
<div class="pt-6">
    <v-row class="ma-0">
    <v-col cols="12" md="12" class="pa-0">
        <v-row class="ma-0">
        <!-- form 1 -->
            <template v-for="(select, index) in selects">
                <component
                :is="select"
                :key="select.name"
                v-model="catId"
                @changed="addComponent(index)"
                :catid="catId"
                :selectindex="index"
                :pcat="productCat[index]"
                :subcat="subCat"
                ></component>
            </template>
        <!-- btn -->
        <v-col cols="12" sm="6" md="3" class="px-1">
            <v-btn width="100%" class="theme__little__color2 text_main_color px-2" @click.prevent="addCatBtn()">{{lang.addcat}}</v-btn>
        </v-col>
        {{selectedCatArr}}
        <!-- btn -->
        <addproductbtn :section="section" />
        </v-row>
    </v-col>
    </v-row>
</div>
</template>

<script>
import addproductbtn from '~/components/global/cms/addproductbtn'
import selectcategory from '~/components/global/cms/selectcategory'

export default {
    components:{
        'addproductbtn': addproductbtn
    },
    data(){
        return{
            section: 'cat',
            selects: [selectcategory],
            catId: 0,
            subCat: true,
            selectedCatArr: []
        }
    },
    methods:{
        addComponent(index){
            
                this.selects.length = index + 1
                setTimeout(() => {
                    this.selects.push(selectcategory)
                }, 1);
            
        },
        addCatBtn(){
            this.goToRedirect('/cms/category/insert', this.$route.path, this.ProductId)
        },
        async insertCategory(){
            const data = {
                pId: this.editProduct.pId,
                catId: this.catId
            }
            // let response = await this.axiosPost('product/catupdate', data)
            const productCategory = this.selectedCatArr
            this.setEditProductCat(productCategory)
        }
    },
    computed:{
        productCat(){
            return this.editProduct.categories
        },
        ProductId(){
            return this.editProduct.pId
        }
    },
    created(){
        this.$nuxt.$on('insert', ()=>{
            this.insertCategory()
        })
        this.$nuxt.$on('nextcat', (subCat)=>{
            this.subCat = subCat
        })
        this.$nuxt.$on('nextpanel', ()=>{
            this.insertCategory()
        })
        this.$nuxt.$on('selectedcat', (selected, index)=>{
            delete selected.subCategory
            this.selectedCatArr.length = index
            this.selectedCatArr.push(selected)
        })
    }
}
</script>

and my select component:

<template>
    <v-col cols="12" sm="6" md="3" class="px-1 text_details_color3" v-if="showCat">
        <v-select
        return-object
        :items="items"
        :label="lang.category"
        v-model="selected"
        @change="emitEvent"
        item-text="title"
        item-value="id"
        outlined></v-select>
        {{selected}}
    </v-col>
</template>

<script>
export default {
    props:['selectindex','catid','pcat','subcat'],
    data(){
        return{
            selected:{},
            items:[],
            showCat: true
        }
    },
    async fetch(){
        // this.items = await this.axiosGet(`categories/${this.catid}/1`)
        this.items = [
            {id: this.catid + 1, title: this.catid+'title1', subCategory: true},
            {id: this.catid + 2, title: this.catid+'title2', subCategory: true},
            {id: this.catid + 3, title: this.catid+'title3', subCategory: false},
            {id: this.catid + 4, title: this.catid+'title4', subCategory: true}
        ]
    },
    methods:{
        emitEvent(){
            this.$emit('input', this.selected.id)
            this.$emit('changed')
            $nuxt.$emit('nextcat', this.selected.subCategory)
            $nuxt.$emit('selectedcat', this.selected, this.selectindex)
        }
    },
    computed:{
        //
    },
    created(){
        
    },
    mounted(){
        this.selected = this.pcat
        this.showCat = this.subcat
    }
}
</script>

and my store is like this:

state:
editProduct:{
   categories: [],
}

mutation:
SET_EDITPRODUCT_CAT(state, cat){
   state.editProduct.categories = cat
}

action:
setEditProductCat({commit}, cat){
   commit('SET_EDITPRODUCT_CAT', cat)
},

UPDATE

• i'm on Nuxtjs and my mapActions and mapGetters are imported globally in my mixins
• as i tried on other parts of my app, found out that this problem only occur when my state is array or obj. string, bool, int and other single types are ok. i can set them as many time as i want.

来源：https://stackoverflow.com/questions/63009339/error-vuex-do-not-mutate-vuex-store-state-outside-mutation-handlers-even-with-c