Vue.js плохая практика ссылаться на магазин прямо в v-for в шаблоне?

Question

Vue.js плохая практика ссылаться на магазин прямо в v-for в шаблоне?

1

Я работаю над своим первым приложением Vue.js(Vue 2.x), и я пытаюсь запустить спринт, прежде чем я смогу проползти, так что это была поездка. У меня наконец-то появился рабочий прототип, но я заинтересован в том, чтобы с ним справиться. У меня есть два родственных компонента под корнем на одной странице, например:

<Root>
    <TimeCreate> router-view
    <TimeIndex> = $vm0 router-view

В TimeCreate я создаю запись, которую я хочу мгновенно отображать в TimeIndex без перезагрузки страницы, конечно. TimeCreate создает запись, а затем я перезаряжаю хранилище времени с помощью отправленного действия. В TimeIndex я определял переменную времени в таких данных:

 data: function () {
        return {
            times: this.$store.state.userTimes,
            ...

а затем в моем шаблоне:

<tr v-for="tm, index in times">
   ...
</tr>

но компонент TimeIndex никогда не реагировал на изменение данных в магазине, потому что у меня не было наблюдателя? И затем я прочитал несколько сообщений SO о том, как плохо было "смотреть" магазины Vuex... но потом, когда я изменил свой шаблон TimeIndex для цикла:

<tr v-for="tm, index in this.$store.state.userTimes">
   ...
</tr>

внезапно у меня есть де-факто хранитель магазина в моем шаблоне TimeIndex, и он работает отлично, пока.

Постараюсь ли я решить проблемы позже с помощью этого подхода? Я делал такие вещи довольно часто (помещая переменные хранилища непосредственно в шаблон), и мне интересно, буду ли я платить позже. Спасибо за вашу помощь.

saswanb 14 июль 2018, в 00:16

Источник

0

Помог ли тебе мой ответ?
li x 16 июль 2018, в 01:18
1

@li x Да, спасибо.
saswanb 16 июль 2018, в 15:11

Теги:

javascript

vuejs2

vuex

vue-component

1 ответ

Ещё вопросы

li x · Accepted Answer · 2018-07-13T22-19-00.000Z

Хорошо, поэтому, чтобы решить ваши проблемы,

1)

data: function () {
        return {
            times: this.$store.state.userTimes,
            ...

Здесь вы присваиваете значение this.$store.state.userTimes в момент, когда этот адрес читается новой переменной, это просто значение, и если он не является реактивным типом, он не получит никаких обновлений. Маловероятно, что вы захотите сделать это, если только вы не уверены, что хотите получить копию значения в начальном состоянии и не хотите получать обновления.

2)

<tr v-for="tm, index in this.$store.state.userTimes">
   ...
</tr>

Поскольку вы используете значение, которое хранится в Vuex по ссылке на него, вы будете получать обновления всякий раз, когда значение изменяет на мутацию. Вам не нужно использовать вычисляемое свойство, поскольку вы просто хотите использовать это значение и не строите логику в том, что делать с вашим компонентом при изменении значения. Полезно отметить, что на самом деле вы не просматриваете переменную здесь, просто просто имеете ссылку на значение, содержащееся в хранилище, здесь нет волшебства.

3)

Постараюсь ли я решить проблемы позже с помощью этого подхода? Я делал такие вещи довольно часто (помещая переменные хранилища непосредственно в шаблон), и мне интересно, буду ли я платить позже. Спасибо за вашу помощь

Правильное использование вашего состояния, задав хранилище для текущего состояния и используя ссылку в логике компонентов, это правильный подход для простых операций и в основном для большинства материалов в базовом приложении.