problem with mutation in vuex

[pospi-cz]

Hi my problem is console message [[vuex] do not mutate vuex store state outside mutation handlers.] when edit inputs
Im very new in Vue so be kind :)
My code test.vue:

<template>
    <div v-for="(item, inx) in get_list" v-bind:key="inx">     
      <q-input v-model="item.value" :label="item.name" outlined  dense />        
    </div>     
    <div>
        {{ get_list }}
    </div>
</template>
<script>
import { defineComponent, ref } from "vue";
import { mapGetters, mapActions } from "vuex";

export default defineComponent({
  name: "Test",
   computed: {
     ...mapGetters({
      get_list: 'test/get_list',
      get_input: 'test/get_input'
    })
           
  },
  methods: {    
    ...mapActions('test', ['set_input_value']),
  }
});
</script>

store-test.js :

const state = {
    list:         [
         {
            name: 'name1',
            value: 'value1'
    },
         {
            name:'name2',
            value: 'value2'
        }
    ]
}

const mutations = {
}

const actions = {
}

const getters = {
    get_list: (state) => {
        return state.list
    }
}

export default {
    namespaced: true, // vice stavu
    state,
    mutations,
    actions,
    getters
}

My question is : how code actions and mutations ?

[ontwikkelfabriek]

@pospi-cz

See the vuex docs for help:
https://vuex.vuejs.org/guide/mutations.html

[odranoelBR]

hi @pospi-cz
Read the link from @ontwikkelfabriek to understand why this message
and read https://vuex.vuejs.org/guide/forms.html#two-way-computed-property to how you can achieve your goal
Btw, your snake_case variable names are not used much. In the docs, you will see camelCase

[hawkeye64]

@pospi-cz I probably would have done it this way:

<template>
    <div v-for="(item, inx) in get_list" v-bind:key="inx">     
      <q-input :modelValue="item.value" :label="item.name" outlined  dense @update:modelValue="val => get_list(val, inx)"/>        
    </div>     
    <div>
        {{ get_list }}
    </div>
</template>
<script>
import { defineComponent, ref } from "vue";
import { mapGetters, mapActions } from "vuex";

export default defineComponent({
  name: "Test",
   computed: {
    get_list: {
      get () {
        return this.$store.test.state.list
      },
      set (value, index) {
        this.$store.commit('test/update_Item', { value, index })
      }
    }
  }
});
</script>

and add the missing mutation

const mutations = {
  update_item (state, { value, index }) {
    state.list[index] = value
  }
}

Note: untested...

Edit: haha! Just noticed this is a mix of options and composition apis