Блог

ЦЕЛЬ: Я хотел бы просмотреть объект состояния vuex (MATCH_DATA) на предмет изменений, специфичных для значения реквизита (TopicID). Итак, я хотел бы настроить наблюдателя на просмотр MATCH_DATA[TopicID]. И всякий раз, когда MATCH_DATA[TopicID] обновляется, я хотел бы вызывать функцию (в этом раннем случае просто регистрирую ее).

Однако, поскольку MATCH_DATA является получателем, как бы я передал ему параметр? Геттер vuex, похоже, не предназначен для учета параметров. Я видел некоторые примеры, явно вызвав этот файл.$store.state.etc.etc., Но есть ли способ сделать это, сохранив три точечные обозначения, которые у меня в настоящее время есть?

Или есть ли какой-то лучший способ достижения этой цели, который не предполагает получения vuex?

Текущий Код:

Компонент Nuxt:

 <script>
import { mapGetters, mapActions } from 'vuex';

export default {
    props: ['topicId'],

    computed: {
        ...mapGetters('sessionStorage', ['MATCH_DATA']),
    },

    watch: {
        MATCH_DATA (newMatchData, oldMatchData) {
            console.log(newMatchData);
        }
    },
    
    mounted() {
        this.SUBSCRIBE_TO_TOPIC(this.topicId);
    },
    
    methods: {
        ...mapActions('sessionStorage', ['SUBSCRIBE_TO_TOPIC'])
    }
}
 

магазин vuex:

 /* State */
export const state = () => ({
    MATCHES: {},
});

/* GETTERS */
export const getters = {
    MATCH_DATA: (state) => {
        return state.MATCHES;
    },
};
 

Ваш получатель может просто вернуть функцию, подобную этой:

 export const getters = {
    MATCH_DATA: (state) => {
        return topicId => {
          // return something
        }}
    },
};
 

Затем вы можете создать вычисляемое свойство для доступа к этим получателям:

 export default {
  computed: {
    ...mapGetters('sessionStorage', ['MATCH_DATA']),

    yourComputedProperty () {
      return this.MATCH_DATA(this.topicId)
    }
  }
}
 

Затем вы можете наблюдать за вычисляемым свойством, чтобы реагировать на изменения.

 watch: {
  yourComputedProperty (newData, oldData) {
    console.log(newData);
  }
}