当道具在商店中更改时，子组件不会重新渲染

Question

我将 Vue-js 与 require-js 一起使用。我正在尝试从 vuex 商店获取数据到我的 cart 组件 并为商店中的每个项目呈现一个组件。但是，当我从我的 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 开发工具，发现触发突变后，我的 cart 组件 的 props 已更新，但未显示在 UI 上。

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

我做错了什么还是有其他方法可以让它发挥作用。

Answer 1

你不能使用数组索引来设置 Vue.js 的值。这是Javascript造成的限制。

如果您创建商店时user 和/或item 不存在，这将不会发生反应。

newState[user][item].date = 

相反，您需要使用：

Vue.set(object, key, value)

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