Vue: 목록에 항목 추가

Vue: 목록에 항목 추가

저는 Vue Js를 배우는 초보자입니다.목록에 항목을 추가하려고 하는데 작동하지 않습니다.리스트는 스토어 상태이며, 새로운 요소를 추가하는 기능은 돌연변이에 있습니다.코드가 잘못되어 있거나 오류가 발생한 새 요소를 추가할 수 있는 함수입니다.

제발 도와주세요.

Vuex 스토어 코드가 있습니다.

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    produits: [
            {text: "ananas", checked: true},
            {text: "banane", checked: false},
            {text: "orange", checked: true},
    ],
    newProduit: ''
  },
  mutations: {
    addItem: function(ecrit) {

      ecrit= this.state.newProduit.trim();
      if(ecrit) {
        this.state.produits.push({
          text:ecrit,
          checked: false
        });
      }
    }
  },
  actions: {},
  modules: {},
});

컴포넌트 코드가 있습니다.

<template>
  <div>
    <b-input-group class="mt-3">
      <b-form-input></b-form-input>
      <b-input-group-append>
        <b-button variant="info" v-on:click="ajoutElement">Ajouter</b-button>
      </b-input-group-append>
    </b-input-group>
  </div>
</template>

<script>
export default {
  computed: {
    ajoutElement: {
      get() {
         return this.$store.state.produits;
      },
      set(value) {
        this.$store.commit('addItem',value)
      }
    }     
  }
}
</script>

잘 부탁드립니다.

구성 요소에서 수행하는 각 작업에 대해 작업을 추가해야 합니다.

addItemAction 액션을 추가했습니다.이것을 참조용으로 참조할 수 있습니다.이상적으로는 액션-> 커밋-> 변환이 필요합니다.

대규모 어플리케이션에서는 개별 모듈을 작성할 수도 있습니다.각 모듈에 대해 액션-> 커밋-> 변환을 실행하는 기능이 필요합니다.

요소

set(value) {
        this.$store.dispatch('addItemAction',value); // Dispatch action with name and params.
      }

지금 vuex 저장소 업데이트

export default new Vuex.Store({
state: {
produits: [
        {text: "ananas", checked: true},
        {text: "banane", checked: false},
        {text: "orange", checked: true},
],
newProduit: ''
},
mutations: {
addItem: function(ecrit) {

  ecrit= this.state.newProduit.trim();
  if(ecrit) {
    this.state.produits.push({
      text:ecrit,
      checked: false
    });
  }
}
 },


actions: {
  addItemAction: function(context, ecrit){
    context.commit('addItem', ecrit); // Commit from here.
  }
},
modules: {},
});

언급URL : https://stackoverflow.com/questions/68032291/vue-add-an-item-to-a-list