Наблюдение и отслеживание изменений состояния с помощью Vuex внутри дочерних компонентов

Question

Это скорее вопрос «какой метод мне следует использовать», а не как.

В моем экземпляре Vuex.Store() есть следующее:

store.js

export default new Vuex.Store({
  state: {
    acceptedTermsAndConditions: false
  },
})

Из различных компонентов я генерирую событие, которое устанавливает this.$store.state.acceptedTermsAndConditions в true или false, в зависимости от различных пользовательских вводов.

Тем не менее, в моем компоненте я бы установил проверенное значение флажка «Accepts T & Cs» на это значение, примерно так:

components/Component.Vue

data () {
    return {
        form: {
            checkboxTermsAndConditions: this.$store.state.acceptedTermsAndConditions
        }
    }
}

Я просто не уверен, какой метод это обрабатывает? Требуется ли для решения getter? Если нет, то как лучше всего следить за изменениями состояния и соответственно устанавливать значения данных?

Answer 1

Если вы хотите установить состояние флажка на основе сохраненного значения, вы должны использовать вычисляемый объект и вспомогательную функцию mapGetters в вашем компоненте:

https://vuex.vuejs.org/guide/getters.html#the-mapgetters-helper

computed: {
...mapGetters(['acceptedTermsAndConditions'])
}

Таким образом, значение будет доступно в вашем компоненте. Если вы хотите сделать обратное (обновить хранилище на основе значения флажка), вы должны создать мутацию в своем магазине и использовать ее в своем компоненте:

methods: {
...mapMutations(['setTACcheckbox'])
}

Таким образом, внутри вашего компонента вы можете обновить значение хранилища с помощью this.setTACcheckbox (value).