Новым для Vuex и Vue в целом я с трудом поднимаю голову, как Vuex используется "реактивно". Сотрудник попытался объяснить и не сделал очень хорошую работу, или я просто плотный, но он сказал, что магазин можно наблюдать за реактивными обновлениями, чтобы перекрасить ваш интерфейс.
Я думаю, что я задумываюсь над вычисленными свойствами, например, он обертывает свойства, используемые с ним, тело функции в обратном вызове или что-то в этом роде, и будет переоценивать всю функцию на любом из этих изменений. Как Vuex играет в это? Я вижу примеры вроде состояния магазина, геттеров и мутаций
state: {
user: null,
role: null
},
getters: {
getUser: state => state.user,
getRole: state => state.role,
},
mutations: {
setUser: ({state}, user) => {
state.user = user
},
setRole: ({state}, role) => {
state.user = role
}
}
Я просто не перекрываю разрыв между этим и компонентом, способным обновлять пользовательский интерфейс. Я устанавливаю методы или что-то вроде наблюдаемых обратных вызовов, о которых я упоминал?
methods: {
getUserFromStore () {
return this.$store.getters.getUser
}
}
Мне нужно вручную называть это так, чтобы оно противоречило реактивности. Нужны ли мне функции картографа?
Нужны ли мне функции картографа?
Они очень полезны, да. Они будут убирать геттеры вниз, обернув их в вычисленное свойство.
Вы можете сделать это вручную самостоятельно, но ваш существующий код пытается обернуть геттер как метод. Это неправильно, потому что вы не вызываете "геттеры". Getters - это "вычисленные" свойства в контексте Vuex.. Я не знаю, почему они названы по-разному. Но ручной обертке хотелось бы:
computed: {
user() {
return this.$store.getters.getUser;
}
}
Это по сути то, что mapGetters
делает для вас. Затем ваш компонент просто ссылается на this.user
Редактировать:
Кроме того, геттеры обычно используются, когда вы каким-то образом преобразуете данные. В вашем случае, если вам просто нужна ссылка на user
в состоянии mapState
вместо этого используйте mapState
:
computed: {
...mapState(['user']) // reference as this.user
}
Если я правильно понимаю ваш вопрос, реактивность Vuex аналогична реакциям computed
свойств в Vue. Рассмотрим следующее:
<template>
<h2>{{ user }}</h2>
</template>
<script>
export default {
computed: {
// getters from store
user () {
return this.$store.getters.getUser
}
}
</script>
В любое время, когда user
вносит изменения в хранилище, значение user
вычисляемого свойства также изменится.