Как сохранить массив в Vuex в VueJs - PullRequest
Новая
       109

Как сохранить массив в Vuex в VueJs

0 голосов

Может кто-нибудь подскажет, как написать массив объектов в Vuex Я объясню суть В этой ситуации мне нужно создать систему управления заказами У меня есть массив продуктов с разными данными Этот массив я получаю с сервера, используя ax ios request Через v-for, я отобразил этот массив в теге select option html Далее, нажав на тег option html, мне нужно добавить продукт в таблицу данных Также, с добавлением Для указанного c продукта в таблицу необходимо, чтобы продукт, для которого был сделан клик, был записан в хранилище Vuex, но не с перезаписью, а с добавлением к существующим данным Далее, в синхронизации с добавлением в Vuex store, информация выводится из хранилища Vuex в таблицу

это мой код в Vue Component 

<code><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}}
data () {return {selected: '', formData: {userId: ''}, orderData: {productId: [], price: [], total: [], количество: []}}}, методы: {addOrderData () {let data = {productId: this.orderData.productId, name: this.orderData.name, price: this.orderData.price,} this. $ store.commit ('orders / setOrderProduct', data)}},

это мой код в магазине Vuex 

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

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

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

1 Ответ

0 голосов
/ 09 мая 2020

Если я вас правильно понял, проверьте следующее:

шаблон: 

  <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>

код: 

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);
    }
  }
});

Идея в том, когда change событие запускается при выборе опции, вы меняете commit на store с выбранным продуктом как payload. Вычисляемое свойство orderProducts будет ссылаться на sh, и таблица получит последние данные. Вы можете проверить это jsfiddle .

...