Как в vuex реактивно добавить свойство в объект?

Question

[testopikachu]

Привет, подскажите, пожалуйста, как правильно в vuex реактивно создать свойство, которого до этого не было в объекте?

state.all[0].children.find(page => page.id === id) Я в дальнейшем планирую заменить на ф-ю поиска элемента в дереве, пока так.

Почему то реактивность срабатывать только в первый раз, в последующие разы видно, как меняется свойство в vue dev tools, но {{page.toggled}} в шаблоне так и остается неизменным

Я залил видео что бы было понятнее о чем речь - https://www.youtube.com/watch?v=upwCS4YMET4&featur...

Из-за чего такое может происходить?

<div>{{page.toggled}}</div>

mutations: {
  toggle(state, id) {
    let page = state.all[0].children.find(page => page.id === id)
    Vue.set( page, 'toggled', Math.random(0, 333) )
  },
}

UPDATE:

Все, проблема решилась.

В конфиге webpack были:

resolve: {
  alias: {
    <b>v</b>ue$: 'vue/dist/vue.esm.js',
  },
},

А в одном из файлов был импорт
import Vue from '<b>V</b>ue'

Соответственно вебпак подгружал дополнительную версию vue, не видя алиас из-за прописной буквы. Отсюда и баг :-(

Comments

[alex]

в песочницу код залейете

[testopikachu]

Alex, в песочнице, как оказалось, все работает

Answer 1

[testopikachu]

Обновление:
В песочнице воспроизвести глюк не удалось, пока вот такие выводы, которые еще ни к чему не привели :-(
Я использую vue + vue ssr + vuex
И почему то так получается что в моей конфигурации одновременно загружаются vue.esm.js и vue.runtime.common.dev.js

Из-за этого получается какая то беда с реактивностью
Когда в vuex я задаю объект типа такого:

state: () => ({
  all: {
    test: 'passed'
  },
}),

И в мутации меняю значение свойства «test» Vue.set(state.all, 'test', Math.random(0, 333)) то все нормально
Но если я создаю в объекте новое свойство Vue.set(state.all, 'anotherOption', Math.random(0, 333)) то это свойство не становится реактивным

Как видно на скриншоте сеттер и геттер свойства, которые были в объекте принадлежат vue.esm.js, а нового vue.runtime.common.dev.js
Возможно из-за этого и все проблемы.

Не могу понять почему у меня получаются 2 экземпляра vue, возможно так и должно быть? Может знает кто?

Comments

[Алексей Ярков]

В песочнице воспроизвести глюк не удалось

Ссылку в студию

[testopikachu]

Алексей Ярков, https://codesandbox.io/s/vmske но в песочнице все работает, там нет серверного рендеринга