Как динамически добавлять свойства состояния с помощью мутаций - PullRequest
Новая
       11

Как динамически добавлять свойства состояния с помощью мутаций

1 голос
/ 27 июня 2019

Я хочу добавить свойства в store.state с помощью мутаций. Очень простой пример: 

// state.js
export default () => ({
    Prop1: '1',
    Prop2: '2'
})

//mutations.js
export default {
    makeProp (state, anotherProp) {
        return state.anotherProp = anotherProp;
    }
}

// State Client
export default () => ({
    Prop1: '1',
    Prop2: '2',
    anotherProp: 'what ever'
})

Все работает хорошо. Но неприятно то, что в Vue-Component он больше не реагирует. Если anotherProp получает новое значение, компонент не отображает его.

Если я определил anotherProp, зафиксированный в State, он реагирует. Я могу себе представить, почему. Я предполагаю, что реактивность Vue должна знать его данные, поэтому он знает, какие изменения слушать.

Но что я могу сделать? Мне действительно нужно добавить состояния с помощью мутации. Фон:

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

Могу ли я как-нибудь обойти это? Я до сих пор понятия не имею: D

Ответы [ 2 ]

2 голосов
/ 27 июня 2019

Как сказали Льюис и согласно правилам мутаций vuex , кажется, что все первоначальные изверги должны существовать при инициализации магазина.

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

export default () => ({
  data: {
    Prop1: '1',
    Prop2: '2'
  }
})

Делая это, вы можете использовать: 

Vue.set(data, 'anotherProp', 'what ever')

или 

state.data = { ...state.data, 'anotherProp': 'what ever' }
0 голосов
/ 27 июня 2019

Вот мутация для создания Государственной собственности, и я пытаюсь интегрировать, чтобы этот опора реагировала на Vue

ОБНОВЛЕНИЕ -------------------------------------------- 

// mutation.js
import Vue from 'vue'

export default {
    stateUpdate (state, target) {
      Vue.set(state, target.t, target.data);
    },
}

Это то, что мне было нужно, потому что мне нужно было mutate и set в самом Vuex Store, а не через компонент.

Спасибо за помощь:)

...