Vue：将项目添加到列表中

Question

我是学习 Vue Js 的初学者。我正在尝试将一个项目添加到列表中，但它不起作用。我的列表处于 store 的状态，添加新元素的功能在 mutation 中。 Please 是允许添加新元素的功能编码错误或错误在其他地方。

请帮帮我。

这是我的 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>

提前感谢您的帮助

Answer 1

您应该为您从组件中执行的每个操作添加操作。

我添加了一个动作 addItemAction。你可以看到这个作为参考，理想情况下你应该有 action-> commits-> mutation

在大型应用程序中，您甚至可以创建单独的模块，每个模块应该具有执行操作->提交->突变的功能

组件

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: {},
});