vue.js - 错误：vuex 不会在突变处理程序之外改变 vuex 存储状态即使将 const 传递给突变

Question

正如@skirtle 关于另一个相同问题的建议，用于const改变我的状态但出现错误。更清楚地说，我的状态是一个空数组，它将第一次被填充，但如果我尝试更改我的选择，我会收到错误！！！更不用说发送另一个突变了！所以我想如果我在此之前填写我的状态，（在编辑我的产品的情况下），我也会在第一次尝试时得到错误。这是代码：

<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>

和我的选择组件：

<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>

我的商店是这样的：

state:
editProduct:{
   categories: [],
}

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

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

更新

• i on Nuxtjsand mymapActions并mapGetters在 my 中全球导入mixins
• 当我在我的应用程序的其他部分上尝试时，发现这个问题只发生在我的状态为array或时obj。string, bool,int和其他单一类型都可以。我可以随意设置它们。

标签： vue.jsvuejs2vuexnuxt.js