How to store array to Vuex in VueJs

Question

Can someone tell me how to write an array of objects in Vuex I will explain the essence In this situation, I need to create an order management system I have an array of products with different data This array I get from the server using axios request Via v-for, I displayed this array in the select option html tag Next, by clicking on the html option tag, I need to add the product to the data table Also, with the addition of a specific product to the table, it is necessary that the product for which a click is made is recorded in the Vuex store, but not with rewriting, but with addition to existing data Next, in synchronization with the addition to the Vuex store, information is output from the Vuex store to the table

this is my code in Vue Component

<div class="row">
                                <div class="col-md-8">
                                    <table class="table table-bordered table-striped">
                                        <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Price</th>
                                            <th>QTY</th>
                                            <th>Action</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="col-md-4">
                                    <form>
                                        <div class="form-group">
                                            <label for="products">Select Products</label>
                                            <select v-model="orderData" @change="addOrderData" id="products"  class="form-control">
                                                <option  v-for="product in products" multiple v-bind:value="{productId: product.id, name: product.name, price: product.price}">{{product.name}}</option>
                                            </select>
                                            <pre>{{orderData}}</pre>
                                        </div>
                                    </form>
                                </div>
                            </div>

data() {
        return {
            selected: '',
            formData: {
                userId: ''
            },
            orderData: {
                productId: [],
                price: [],
                total: [],
                quantity: []
            }
        }
    },

methods: {
        addOrderData()
        {
            let data = {
                productId: this.orderData.productId,
                name: this.orderData.name,
                price: this.orderData.price,
            }
            this.$store.commit('orders/setOrderProduct', data)
        }
    },

this is my code in Vuex store

function initialState () {
const orderProducts = [];
return {
    orderProducts
}}

const getters = {
orderProducts(state)
{
    return state.orderProduct;
},};

const mutations = {
setOrderProduct(state, orderProduct)
{
    state.orderProduct = orderProduct;
}};

Answer 1

If I understand you correctly, please check the following:

template:

  <select v-model="orderData" @change="addOrderData">
    <option v-for="(product) in products" :key="product.productId" :value="{productId: product.productId, name: product.name, price: product.price}">
      {{product.productId}} - {{product.name}}</option>
  </select>

  <br /><br />

  <table>
    <thead>
      <tr>
        <th>name</th>
        <th>price</th>
      </tr>
    </thead>
    <tbody v-if="orderProducts.length > 0">
      <tr v-for="(item, index) in orderProducts" :key="index">
        <td>{{item.name}}</td>
        <td>{{item.price}}</td>
      </tr>
    </tbody>
    <tbody v-else>
      <tr>
        <td colspan="2">No products to display</td>
      </tr>
    </tbody>
  </table>

code:

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    orderProducts: []
  },
  mutations: {
    addProduct(state, payload) {
      state.orderProducts.push(payload);
    }
  }
})

new Vue({
  store,
  el: '#app',
  data() {
    return {
      products: [{
          productId: 1,
          name: 'Product One',
          price: 10
        },
        {
          productId: 2,
          name: 'Product Two',
          price: 15
        }
      ],
      orderData: {
        productId: [],
        price: [],
        total: [],
        quantity: []
      }
    };
  },
  computed: {
    orderProducts() {
      return this.$store.state.orderProducts;
    }
  },
  methods: {
    addOrderData() {
      this.$store.commit('addProduct', this.orderData);
    }
  }
});

The idea is when change event is triggered by selecting an option, you commit mutation to the store with the selected product as payload. The orderProducts computed property will refresh, and the table will get the latest data. You can check this jsfiddle.