CODEWITHSUNDEEP
javascriptvue.jsvuexnuxt.js
equaliser
equaliser

Reputation: 171

How to Add State Properties dynamically via Mutations

I want to add Properties into store.state via mutations. Very Simple Example:

// 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'
})

It all works well. But the nasty thing is, it seems not to be reactive in Vue-Component anymore. If anotherProp gets a new value, the component doesnt render it.

If i have defined anotherProp fixed in State, it is reactive. I can imagine why. I guees the reactivity of Vue needs to know its data, so it knows on which changes to listen to.

But what can I do? I really need to add states via mutation. The background is:

We have a Databasemanagement implemented. So if a user creates a new database, the vuex store needs to know these dynamically. So for now, we have a mutation, which creates states for each database.

Can I have any way around that? I still have no idea :D

Upvotes: 1

Views: 1078

Answers (2)

equaliser
equaliser

Reputation: 171

Here is the mutation to create the State Property and I try to integrate making this Prop reactive for Vue

UPDATE --------------------------------------------

// mutation.js
import Vue from 'vue'

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

This is what I needed, because I needed it mutate and set in Vuex Store itself, not via component.

Thx for your help :)

Upvotes: 0

fifoq
fifoq

Reputation: 203

As said by Lewis and According to vuex mutations rules seems all upfront fiends should exists when the store initializes.

A simple solution could be to initialize an upfront property which contains all properties you want. For example:

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

Doing this you could use:

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

or

state.data = { ...state.data, 'anotherProp': 'what ever' }

Upvotes: 2

Related Questions