Storing JavaScript Object and mutating it in Vuex - conception

Question

Lets say I have JavaScript object class like below:

class Car {
  var engineTurnedOn = false;
  ...

  public turnEngineOn() {
     engineTurnedOn = true
  }
}

Now I want to turn engine on. Should I create an action called turnEngineOn which will trigger mutation, which will trigger method 'turnEngineOn' or just call this method on an object directly? In the second case store would be only responsible for management an array of Cars instead of manipulating cars.

Case 1:

//actions
turnEngineOn = ({commit}, car) => {
   dispatch('turnEngineOn', car);
}

//mutation
turnEngineOn = (state, car) => {
  car.turnEngineOn()
}

Case 2: car.turnEngineOn() //outside actions

or maybe I do not need a JavaScript Object?

Regards

I think it might work, though I haven't tested it. Even if it works, though, it'd be an extremely hackish solution. — user234932
– user234932, Commented Oct 16, 2017 at 6:44
Hackish in the sense that Vuex developers won't be responsible if an internal API change in Vuex breaks your code. — user234932
– user234932, Commented Oct 16, 2017 at 6:44
@hayavuk I do not understand. My question is if this is a sense of keeping JS Objects with methods in Store instead of literals — SheppardPL
– SheppardPL, Commented Oct 16, 2017 at 6:57

Reşit Körsu · Accepted Answer · 2017-10-16 08:12:13Z

The turnEngineOn method is a component method so it shouldn't be in the vuex to execute mutation at least. Vuex actions are for asynchronous calls like http requests. Actions can commit mutations after asynchrounous call and mutations mutate the state thats right.

I think you are using Typscript thats why you are using javascript class syntax? If not I recommend using Typescript or not using class syntax.

Mutations should be the only way to change your vuex state, whether you can commit a mutation directly from a component to change the state or you can dispatch an action to commit a mutation. I am using only dispatch in components and not using commits to state change but thats just an opinion as i see from community, some people commits from components. So your code should be like this:

// Car Component...

class Car {
    // var isEngineOn = true, you don't need this in here if you want to use vuex state
    // You need Vue's computed property to reach an element in the vuex store
    get isEngineOn () {
        return this.$store.getters.isEngineOn
    }
    .
    .
    .
    public toggleEngine () {
        this.$store.dispatch('toggleEngine') // You don't need payload in this one
        // You can commit directly like 'this.$store.commit('toggleEngine') if you don't need an action here
    }
}

Now you can bind the method to a button or whatever you like to toggle the car engine.

// You need to define the engine variable in your vuex state...
const state = {
...
    isEngineOn: true,
...
}

// Vuex actions...
toggleEngine ({ commit, state }) {
    commit('toggleEngine')
}

// Vuex mutations...
toggleEngine (state) {
    state.isEngineOn = !state.isEngineOn // makes the variable true if false and vice versa
}

// Vuex getters...
isEngineOn (state) {
    return state.isEngineOn
}

Now you can change your state from your component and use your state variable in your template with your computed property.

Check out docs for further details, and this graph started to make sense after understanding this logic:P. https://github.com/vuejs/vuex

This should be accepted answer, because it shows how class should interact with store correctly.

Collectives™ on Stack Overflow

Storing JavaScript Object and mutating it in Vuex - conception

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related