Question

我正在将Vue-js与require-js一起使用。我试图将数据从vuex商店获取到我的购物车组件中，并为商店中的每个商品渲染一个组件。但是，当我从 body组件触发更改以更改商店时，数据正在更改，而 cart组件的道具也发生了更改，但是UI并没有渲染。

这是我的商店：

    state: {
      users: {
        user1: {
           item: { date:null }
        }
      }
   }
   mutations: { setDate:function(state,payload){ 
              var newState = state.users;
              newState[user][item].date = payload.date
              state.users = Object.assign({},newState)
           } }

这是我的购物车组件：

<template>
    <div v-if="activeStep==1">
        <p> Service Time: {{service.ServiceTime}} Min.</p>
        <p>Date: {{service.date || 'Not Selected'}}  </p>
        <p>Time: {{service.time || 'Not Selected'}}  </p>
        <p>Prefered Staff:  {{service.staff}} </p>
    </div>
</template>

<script>

    define(['Vue','vuex'],function(Vue,vuex){
        return {
            template: template,
            computed: vuex.mapState(['activeStep']),
            props: ['service'],

        }
    })
</script>

这是我购物车组件的父级：

<template>
    <div class="cart-user-body" >

            <div class="cart-service" v-for="(service,key,index) in users[user]" :key="index">
              <div class="cart-service-body">
                    <service-book-details :service="service"></service-book-details>
                </div>
            </div>
        </div>


</template>



<script>
    define([
        'Vue','vuex','vue!./serviceBookDetails'
    ], function(Vue,vuex,serviceBookDetails) {
        return {

            template:template,
            components: {
                'service-book-details': serviceBookDetails
            },
            props: ['user'],
            computed: vuex.mapState(['users']),
        }        
    });
</script>

这是我触发身体成分突变的方式：

addDate(e) {
        var payload = {
          date: moment(e, "DD/MM/YYYY").format("Do MMMM YYYY"),
          id: this.$data.class,
          name: this.username
        };
        this.$store.commit("setDate", payload);
      },

我什至尝试使用 Vue.set（state，'users'，newState），但UI不会重新呈现。

我检查了Vue开发工具，发现触发突变后，我的购物车组件的道具已更新，但未显示在UI上。

如果我尝试使用 getters ，则该对象的键不存在，因为在用户与UI交互并添加数据之前，我的商店没有必需的数据。自开始以来，我的购物车组件一直显示，因此它显示了一个错误，提示cant read property item of undefined。

我做错什么了吗，或者有其他方法可以使它工作？

Answer 1

您不能将数组索引用于Vue设置值。这是Java语言造成的限制。

如果创建商店时user和/或item不存在，这将是无反应的。

newState[user][item].date =

相反，您需要使用：

Vue.set(object, key, value)

在您的情况下，您首先需要确保在分配给user之前，先使用该方法设置item和date。

商店中道具更改时，子组件不会重新呈现

1 个答案: