Question

仅当条件为true时，才需要使用vuex store getter更新“ slotParams”属性。在下面的代码中，第一个true校验之后，vue开始观察“ this。$ store.getters.ENCOUNTER.params”并更新“ slotParams”，而不管条件是真还是假。

props: {
  name: { required: true }
},
data(){
  return {
    slotParams: {}
  }
},
computed: {
  isActive() {
    const encounter = this.$store.getters.ENCOUNTER
    if(encounter.name === this.name){
      this.slotParams = encounter.params
      return true
    }
    return false
  }
},

下面是我想要的示例。我需要中断反应性并控制手动更新。

props: {
  name: { required: true }
},
data(){
  return {
    slotParams: {}
  }
},
computed: {
  isActive() {
    const encounter = this.$store.getters.ENCOUNTER
    if(encounter.name === this.name){
      this.slotParams = JSON.parse( JSON.stringify(encounter.params) )
      return true
    }
    return false
  }
},

是否可以通过适当的方式做到这一点？

Answer 1

如果存储数据发生更改，并且这是被动地完成的，则可以只使用如下所示的mapGetters，也不要直接使用计算值来设置值，在isActive中所做的更多是一种方法，设置具有计算属性的值通常会导致无休止的变化循环。

如果我对您的理解正确，我将尝试以下方法。

import { mapGetters } from 'vuex';

export default {
   props: {
      name: {
         type: String,
         required: true
      }
   },

   data() {
      return {
         slotParams: {}
      }
   },

   computed: {
      ...mapGetters({
         encounter: 'whatever-your-path-is/encounter'
      });,

      isActive() {
         return this.encounter.name === this.name;
      }
   },

   watch: {
      encounter: {
         deep: true,
         handler() {
            // This might be where you want to check conditional for this.isActive
            this.slotParams = JSON.parse(JSON.stringify(this.encounter.params));

            /*
               if (this.isActive) {
                  this.slotParams = JSON.parse(JSON.stringify(this.encounter.params));
               }
            */
         }
      }
   }
}

如何根据条件从vuex存储更新vue组件数据项

1 个答案: