Как обновить данные в vuex state?

Question

[stanislavkm]

Как правильно реализовать добавление товара с его отображением?
Думаю, что ошибаюсь где-то в связывании.

store.js

export const store = createStore({
    state:{
        items: [],
...
    },
    mutations:{
        SET_ITEMS_TO_STATE: (state, items) => {
            state.items = items;
        },
        SET_PRODUCT_TO_STATE: (state, item) =>{
            state.items.push(item);
        },
...
    },
    actions:{
        GET_ITEMS_FROM_API({commit}){
            return axios(' http://localhost:3000/items', {
                method: "GET",
            })
                .then((items) =>{
                    commit('SET_ITEMS_TO_STATE', items.data)
                    return items;
            })
                .catch((error) =>{
                    console.log(error)
                    return error;
                })
        },
        ADD_TO_PRODUCTS({commit}, item){
            commit('SET_PRODUCT_TO_STATE', item)
        },
...
    },
    getters:{    
        ITEMS(state){
            return state.items;
        },
       ...
})

компонент, в котором отображаю данные:

<template>
...
        <tr v-for="item in this.$store.state.items" :key="item.name"
            :item_data="item"
        >
          <td><input class="adm_input" type="text" :value="`${item.name}`" :readonly="isReadonly"></td>
          <td><input class="adm_input" type="text" :value="`${item.bju}`" :readonly="isReadonly"></td>
        </tr>
...
</template>

в этом же template ниже есть форма с добавлением нового товара:

<div class="Form_window" v-if="isProductFormActive">
        <div class="Form_window_header">
          <h3>Добавление товара</h3>
          <button class="close_Form" @click="productFormActive">X</button>
        </div>
        <form class="productForm" @submit.prevent>
          <input class="Form_input" v-model="item.name" type="text" placeholder="Наименование товара">
          <input class="Form_input" v-model="item.bju" type="text" placeholder="БЖУ товара">
          <button class="add_btn" @click="ADD_TO_PRODUCTS">Добавить товар</button>
        </form>
      </div>
<script>
import {mapActions, mapMutations} from 'vuex'
export default {
  data(){
    return{
      Item: {
        name: '',
        imgUrl: '',
        bju:'',
        desc:'',
        price:'',
      }
    }
  },
  name: 'productsTable',
  methods:{
    ...mapActions([
        'ADD_TO_PRODUCTS',
    ]),
    ...mapMutations([
        'SET_PRODUCT_TO_STATE'
    ]),
  },
}
</script>

Comments

[Антон Антон]

Если проект только-только начался, то лучше вместо vuex использовать https://pinia.vuejs.org/ - он НАМНОГО менее многословен.

А вообще не вижу даже попыток что-то добавить в стейт (никакого обработчика сабмита у формы добавления нет)

Answer 1

[0xD34F]

data(){
  return{
    Item: {
      ...

v-model="item.name"

Ну и как там у вас имя свойства начинается - с большой буквы или маленькой? Вы определитесь.

ADD_TO_PRODUCTS({commit}, item){
    commit('SET_PRODUCT_TO_STATE', item)
},

methods:{
  ...mapActions([
      'ADD_TO_PRODUCTS',
  ]),

@click="ADD_TO_PRODUCTS"

В экшене ожидается параметр, но вы ничего не передаёте. Точнее, не передаёте в явном виде - передаётся объект события клика. А надо item (Item?).

После того, как исправите косяки выше, у вас, вероятно, вылезет ещё один. С ним разбираться будете здесь.