如何在 VueJs 中将数组存储到 Vuex

Posted 2023-02-23

【中文标题】如何在 VueJs 中将数组存储到 Vuex

【英文标题】：How to store array to Vuex in VueJs

【发布时间】：2020-08-24 13:21:34

【问题描述】：

谁能告诉我如何在 Vuex 中编写对象数组 我会解释本质 在这种情况下，我需要创建一个订单管理系统 我有一系列具有不同数据的产品 我使用 axios 请求从服务器获取的这个数组 通过 v-for，我在 select option html 标记中显示了这个数组 接下来，通过点击 html option 标签，我需要将产品添加到数据表中 此外，在表中添加特定产品时，需要将点击的产品记录在 Vuex 存储中，但不是重写，而是添加到现有数据 接下来，与添加到 Vuex 存储同步，信息从 Vuex 存储输出到表中

这是我在 Vue 组件中的代码

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

这是我在 Vuex 商店中的代码

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


const getters = 
orderProducts(state)

    return state.orderProduct;
,;

const mutations = 
setOrderProduct(state, orderProduct)

    state.orderProduct = orderProduct;
;

【问题讨论】：

您是否真的尝试过推送到orderProducts，您所做的只是分配给从未初始化过的orderProduct。您的 orderProducts getter 也只返回一个 orderProduct

【参考方案1】：

如果我理解正确，请检查以下内容：

模板：

  <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 计算属性将刷新，表将获取最新数据。你可以查看这个jsfiddle。