Vuejs2 Vuex状态未完全更新同级控件

我在Vuex和更新同级组件的状态方面遇到问题。我知道有必要使用

：键

绑定并将其保存

在我的州，我有：

过滤器：{
客户ID:0，
projectId:0，
projectRoleId:0，
子项目：0，
},

我有4个组成此页面的组件：

月份：此组件具有子组件，但具有筛选器的v-处于此级别

DailyDetail：此组件以更详细的信息显示一天的时间条目

议程：这是日历中显示的同一天的垂直视图（月控件）

筛选：我们可以在这里筛选4个字段中的1个（客户、项目、子项目或项目角色）

当我单击并添加过滤器时，所有3个组件（月、每日详细信息和日程）都只显示过滤结果。这就是我想要的。 但是，当我单击Filters控件上的Clear Filters按钮时，似乎只有Month组件注意到了它。其他的都没变。除了当

hasFilters

getter更改时，正确应用并删除

filtered

类这一事实之外

如果有帮助的话，以下是行动/突变和获得因素：

过滤器的设置直接从计算设置器转到变异：

//过滤器组件上的计算属性：
filteredClientId：{
get（）{返回此值。$store.state.time.filters.clientId；}，
set（value）{this.$store.commit（'time/set_FILTERED_CLIENT'，value）；}，
},
过滤器项目：{
get（）{返回此值。$store.state.time.filters.projectId；}，
set（value）{this.$store.commit（'time/set_FILTERED_PROJECT'，value）；}，
},
filteredProjectRoleId：{
get（）{返回此值。$store.state.time.filters.projectRoleId；}，
set（value）{this.$store.commit（'time/set_FILTERED_PROJECT_ROLE'，value）；}，
},
FilteredSubProjectd：{
get（）{返回此值。$store.state.time.filters.subprojectd；}，
set（value）{this.$store.commit（'time/set_FILTERED_SUB_PROJECT'，value）；}，
},
//以下是相应的突变
设置过滤的客户端（状态、值）{
state.filters.clientId=值；
},
设置项目（状态、值）{
state.filters.projectId=值；
},
设置项目角色（状态、值）{
state.filters.projectRoleId=值；
},
设置过滤子项目（状态、值）{
state.filters.subprojectd=值；
},

以下是月份组件（此组件始终适用于过滤器的设置和清除）：

从“vuex”导入{mapGetters}；
从“./week.vue”导入周；
从“./weekDays.vue”导入工作日；
导出默认值{
组成部分：{
周，
平日，
},
计算：{
…映射器（'time'，['hasFilters'，'weeks'），
},
};

以下是这些组件的getter：

dayswithinpyperiod:（state，getter）=>{
if（！state.currentDay）//这只是为了在尚未加载数据时正常退出
返回[]；
设payPeriodSerial=state.currentDay.payPeriodSerial；
//查找支付期间内的所有条目
让validDays=state.monthlyData.AllDays
.filter（x=>x.PayPeriodSerial===PayPeriodSerial）；
if（getters.hasFilters）{
为了（让我们庆祝节日）{
day.ProjectTimes=day.ProjectTimes.filter（x=>{
返回(
x、 Project.Client.ID==（state.filters.clientId==0？x.Project.Client.ID:state.filters.clientId）&&
x、 Project.ID==（state.filters.projectId==0？x.Project.ID:state.filters.projectId）&&
x、 ProjectRole.ID==（state.filters.projectRoleId==0？x.ProjectRole.ID:state.filters.projectRoleId）&&
x、 SubProject.ID==（state.filters.subprojectd==0？x.SubProject.ID:state.filters.subprojectd）
);
});
}
}
返回有效日期；
},
hasFilters:state=>{
返回state.filters.clientId！==0||
state.filters.projectId！==0||
state.filters.projectRoleId！==0||
state.filters.subprojectd！==0；
},
周：（州，获得者）=>{
if（getters.hasFilters）{
让result=JSON.parse（JSON.stringify（state.monthlyData.Weeks））；
对于（让我们看看结果周）{
用于（让一周中的某一天为天）{
day.ProjectTimes=day.ProjectTimes.filter（x=>{
返回(
x、 Project.Client.ID==（state.filters.clientId==0？x.Project.Client.ID:state.filters.clientId）&&
x、 Project.ID==（state.filters.projectId==0？x.Project.ID:state.filters.projectId）&&
x、 ProjectRole.ID==（state.filters.projectRoleId==0？x.ProjectRole.ID:state.filters.projectRoleId）&&
x、 SubProject.ID==（state.filters.subprojectd==0？x.SubProject.ID:state.filters.subprojectd）
);
});
}
}
返回结果；
}否则{
返回状态.monthlyData.Weeks
？state.monthlyData.Weeks
: [];
}
},

以下是议程部分，稍微向后调整，以仅显示有用的信息：

...
...
...
从“vuex”导入{mapGetters，mapState}；
从“../../store”导入存储；
导出默认值{
店:店,，
混合：[格式化过滤器]
currentDaysTimeEntries: state => {
  return state.currentDay
    ? state.currentDay.ProjectTimes
    : [];
},

currentDaysTimeEntries: (state, getters) => {
  if (state.currentDay) {
    if (getters.hasFilters) {
      return state.currentDay.ProjectTimes.filter(x => {
        return (
          x.Project.Client.ID === (state.filters.clientId === 0 ? x.Project.Client.ID : state.filters.clientId) &&
          x.Project.ID === (state.filters.projectId === 0 ? x.Project.ID : state.filters.projectId) &&
          x.ProjectRole.ID === (state.filters.projectRoleId === 0 ? x.ProjectRole.ID : state.filters.projectRoleId) &&
          x.SubProject.ID === (state.filters.subProjectId === 0 ? x.SubProject.ID : state.filters.subProjectId)
        );
      });
    } else {
      return state.currentDay.ProjectTimes;
    }
  } else {
    return [];
  }
},

daysWithinPayPeriod: (state, getters) => {
  if (!state.currentDay)
    return [];

  let payPeriodSerial = state.currentDay.PayPeriodSerial;

  // Find all of the entries within the pay period 
  let validDays = state.monthlyData.AllDays
    .filter(x => x.PayPeriodSerial === payPeriodSerial);

  if (getters.hasFilters) {
    for (let day of validDays) {
      day.ProjectTimes = day.ProjectTimes.filter(x => {
        return (
          x.Project.Client.ID === (state.filters.clientId === 0 ? x.Project.Client.ID : state.filters.clientId) &&
            x.Project.ID === (state.filters.projectId === 0 ? x.Project.ID : state.filters.projectId) &&
            x.ProjectRole.ID === (state.filters.projectRoleId === 0 ? x.ProjectRole.ID : state.filters.projectRoleId) &&
            x.SubProject.ID === (state.filters.subProjectId === 0 ? x.SubProject.ID : state.filters.subProjectId)
        );
      });
    }
  }

  return validDays;
},

// Find all of the entries within the pay period and make a copy
let validDays = JSON.parse(JSON.stringify(
  state.monthlyData.AllDays
    .filter(x => x.PayPeriodSerial === payPeriodSerial)
));