Javascript 如何在另一个组件的ui中即时更新提交给vuex store的更改？

如何在另一个组件的ui中即时更新提交给vuex store的更改

以下是组件的vuex存储模块

const { property } = require("lodash")
export default {
  state: {
    data: [
        {id: 1, name: 'Angular', status: 'active'},
        {id: 2, name: 'React', status: 'active'},
        {id: 3, name: 'Vue', status: 'inactive'},
    ]
  },
  mutations: {
    UPDATE_ITEM(state, payload) {
        const item = state.data.find(item => _.isEqual(item, payload.item))

      Object.assign(item, payload.status);
    },
  },
  actions: {
    updateItem({ commit }, payload) {
      commit("UPDATE_ITEM", payload);
    },
  },
  getters: {
getData: (state) => state.data,
getMappedStatus: (state) => state.data.map(data => data.status)
  },
};

这就是我在组件1中获取映射状态的方式

computed: {
    getMappedStatus() {
      return  this.$store.geters.getMappedStatus
    }
}

<ul>
<li v-for="item in getMappedStatus>{{item}} </li>
</ul>

以及组件1的ui内部

computed: {
    getMappedStatus() {
      return  this.$store.geters.getMappedStatus
    }
}

<ul>
<li v-for="item in getMappedStatus>{{item}} </li>
</ul>

但问题是，即使状态得到更新，ui也没有得到更新 （内部组件1）

我想这是因为计算属性。。。不确定

如何实现类似和可观察或反应的功能，以便组件1中的getMappedStatus computed属性在从组件2调度操作时自动更新

注意两个组件都位于同一vuex存储模块下

如果这是在angular/ngrx中，我将订阅组件1中的选择器，并立即获得更改。即使我在onInit（）方法或构造函数（）中订阅事件并执行console.log（），来自其他组件的更改也会立即反映出来

但vuex不会发生这种情况

我怎样才能做到这一点：

或者，是否有一种方法可以在组件2发生更改时立即触发组件1内getMappedStatus computed属性的更新：

computed: {
    getMappedStatus() {
      return  this.$store.geters.getMappedStatus
    }
}

---

因此组件1的ui会立即更新。

您需要从

getMappedStatus

计算：{
getMappedStatus（）{
返回此。$store.geters.getMappedStatus
}
}

---

…如果没有

return

语句，

this.$store.geters.getMappedStatus

只是一个表达式，您的计算属性总是返回

未定义的
（因为JS函数没有
return
总是返回
未定义的
）
我们可以将
getter
视为存储的计算属性。与计算属性一样，getter的结果基于其依赖项进行缓存，并且仅当其某些依赖项发生更改时才会重新计算，这意味着如果
component1
在
vuex
存储中变异状态，并且
component2
使用存储中的该属性，则它将在使用该属性的所有组件中自动更新

在线IDE-

Vuex商店

const store = new Vuex.Store({
   state: {
     name: 'mex'
   },
   mutations: {
     mutateName(state, value) {
       state.name = value;
     }
   },
   actions: {
     updateName(context, payload) {
       context.commit('mutateName', payload.name);
     }
   },
   getters: {
     getName(state) {
       return state.name;
     }
   }
});

激发时的
changeName
方法将调度
updateName
操作，该操作将更新名称，并且所有组件将相应地更新，因为它是被动的

然后在任何组件中

computed:{
  name() {
    return this.$store.getters.getName
  }
},
methods: {
  changeName: function () {
    this.$store.dispatch('updateName', {  name: 'mexxxxx'});
  }
}

updateItem
操作返回一个
。将突变提交到
中的vuex存储，然后提交到
块。然后在你想要的组件中使用computed。但是updateItem是从另一个组件调度的操作。但我需要通过getters将更改反映到不同的组件中。我错过了输入。。。在真正的应用程序中，它正在返回。。。这只是堆栈溢出上的一个错误。。。。在我的应用程序组件中，它被返回。。。很抱歉但这不是问题所在。。！我没能打进去。。。在真正的应用程序中，它正在返回。。。这只是堆栈溢出上的一个错误。。。。在我的应用程序组件中，它被返回。。。很抱歉但这不是问题所在。。！