Error: vuex do not mutate vuex store state outside mutation handlers With uploading image

Question

i'm kinda stuck. i get this error every time i try to update my store. what i'm doing is, i fetch my product and store it. here on upload image section (component) at created fill the image with state to show the already uploaded images, then on each upload change my state via dispatch and mutation. i know it has something to do with created() when i fill my data with state, but don't know how to solve that.

here is my template:

<v-card flat class="pb-4" max-width="450px">
  <v-img class="rounded-lg theme__main__color" :src="url"></v-img>
  <v-list container inline class="transparent text-center pa-0">
    <v-list-item class="px-0">
      <v-list-item class="px-1">
        <v-btn
        width="100%"
        class="theme__btn__w text_main_color"
        :loading="isSelecting"
        @click="onChooseClick"
        >{{lang.chooseimage}}</v-btn>
      </v-list-item>
      <v-list-item class="px-1">
        <v-btn
        width="100%"
        class="theme__btn__s text_main_color"
        @click.prevent="uploadImage"
        >{{lang.upload}}</v-btn>
        <input
        ref="uploader"
        class="d-none"
        type="file"
        accept="image/*"
        @change="onFileChanged"
        >
      </v-list-item>
    </v-list-item>
  </v-list>
</v-card>

and this is my script:

export default {
    data(){
        return{
            isSelecting: false,
            selectedFile: null,
            url: null,
            placeholder: '/images/placeholder/place-800.png',
            section: 'img',
            pimages: [],
            pId: null
        }
    },
    methods:{
        onChooseClick(){
            this.isSelecting = true
            window.addEventListener('focus', () => {
                this.isSelecting = false
            }, { once: true })

            this.$refs.uploader.click()
        },
        onFileChanged(e) {
            this.selectedFile = e.target.files[0]
            this.url = URL.createObjectURL(this.selectedFile)
            // do something
        },
        async uploadImage(){
            if(this.notEmpty(this.selectedFile) && this.notEmpty(this.pId)){
                const data = new FormData()
                data.append('image', this.selectedFile)
                data.append('pId', this.pId)
                // let response = await this.axiosPost('product/createproimg', data)
                this.pimages.push({"url": this.url})
                this.url = this.placeholder
                this.setEditProductImg(this.pimages)
            }
        }
    },
    created(){
        this.url = this.placeholder
        this.pId = this.editProduct.pId
        this.pimages = this.editProduct.images
        this.$nuxt.$on('insert',(section)=>{
            if(section === 'desc' && !this.pId){
                this.pId = this.editProduct.pId
            }
        })
    }
}

and of course my store:

state:
editProduct: {
    pId: null,
    images: []
  }

getter:
editProduct(state){
    return state.editProduct
  }

mutation:
SET_EDITPRODUCT_IMG(state, img){
    state.editProduct.images = img
  },

action:
setEditProductImg({commit}, img){
    commit('SET_EDITPRODUCT_IMG', img)
  },

UPDATE thanks to @skirtle the above problem has been solved! but got a new same error on something else. as advise by @skirtle 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!! 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>

Answer 1

I believe the problem is this line:

this.pimages.push({"url": this.url})

The array this.pimages is the same array that's inside the store state and by calling push you're modifying it outside the store.

There are a couple of ways you could fix this.

One way would be to perform the push inside a mutation, e.g. by having an ADD_EDITPRODUCT_IMG mutation:

mutation:
  ADD_EDITPRODUCT_IMG(state, img){
    state.editProduct.push(img)
  },

You'd then call that in much the same way as with your current mutation, except that you'd just pass it the new image to add rather than passing the full array.

An alternative approach that is a bit closer to what you currently have would be to take a copy of the array rather than modifying the original:

const newImages = [...this.pimages, {"url": this.url}]

this.setEditProductImg(newImages)

Using this approach you wouldn't need any changes to your existing store.

Update:

I also suggest making pimages a computed property. There doesn't seem to be any good reason to 'copy' the data out of the store state in a created hook.