Как использовать vuex для реактивных обновлений

Question

Как использовать vuex для реактивных обновлений

1

Новым для 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
    }
}

Мне нужно вручную называть это так, чтобы оно противоречило реактивности. Нужны ли мне функции картографа?

Matt 08 фев. 2018, в 21:07

Источник

0

Вы теряете значения переменных состояния при перезагрузке страницы?
tomrlh 08 фев. 2018, в 19:40
0

Нет, я даже перезагружаю страницу, я просто пытаюсь получить привязку на странице, чтобы обновить, когда что-то в магазине установлено.
user9335070 08 фев. 2018, в 19:45
0

Как вы меняете состояние?
tomrlh 08 фев. 2018, в 19:47

Показать ещё 1 комментарий

Теги:

javascript

vue.js

vuex

2 ответа

0

Если я правильно понимаю ваш вопрос, реактивность Vuex аналогична реакциям computed свойств в Vue. Рассмотрим следующее:

<template>
  <h2>{{ user }}</h2>
</template>

<script>
export default {
  computed: {
    // getters from store
    user () {
      return this.$store.getters.getUser
    }
}
</script>

В любое время, когда user вносит изменения в хранилище, значение user вычисляемого свойства также изменится.

Christopher Murphy 08 фев. 2018, в 17:47

Ещё вопросы

Вы теряете значения переменных состояния при перезагрузке страницы?
Нет, я даже перезагружаю страницу, я просто пытаюсь получить привязку на странице, чтобы обновить, когда что-то в магазине установлено.

Matt · Accepted Answer · 2018-02-08T18-22-00.000Z

Нужны ли мне функции картографа?

Они очень полезны, да. Они будут убирать геттеры вниз, обернув их в вычисленное свойство.

Вы можете сделать это вручную самостоятельно, но ваш существующий код пытается обернуть геттер как метод. Это неправильно, потому что вы не вызываете "геттеры". Getters - это "вычисленные" свойства в контексте Vuex.. Я не знаю, почему они названы по-разному. Но ручной обертке хотелось бы:

computed: {
    user() {
        return this.$store.getters.getUser;
    }
}

Это по сути то, что mapGetters делает для вас. Затем ваш компонент просто ссылается на this.user

Редактировать:

Кроме того, геттеры обычно используются, когда вы каким-то образом преобразуете данные. В вашем случае, если вам просто нужна ссылка на user в состоянии mapState вместо этого используйте mapState:

computed: {
   ...mapState(['user']) // reference as this.user
}