Блог

Я новичок, изучающий 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: {},
});