State Management?

So I have been struggling to wrap my head around the following article: https://vuejs.org/guide/state-management.html#Simple-State-Management-from-Scratch

I wish to implement shared data between multiple components and this was the suggestion.

How would I implement this within the setup of Laravel 5?

For example, where do I put:

const sourceOfTruth = {}
const vmA = new Vue({
  data: sourceOfTruth
})
const vmB = new Vue({
  data: sourceOfTruth
})

and

var store = {
  debug: true,
  state: {
    message: 'Hello!'
  },
  setMessageAction (newValue) {
    this.debug && console.log('setMessageAction triggered with', newValue)
    this.state.message = newValue
  },
  clearMessageAction () {
    this.debug && console.log('clearMessageAction triggered')
    this.state.message = 'action B triggered'
  }
}

Does anyone know of a working example of this that I could use for reference?

Thank You.

prasinoulhs

9 years ago

Best Answer

Level 4

Live Example

Laravel with a bundler.

3 likes

xdega

9 years ago

Level 4

@prasinoulhs

Thank you so much for those clear examples. You are a rockstar! Makes a heck of a lot more sense to me now. Appears I was very close in my attempts.

tinymachine

9 years ago

Level 1

Thanks for the example, @prasinoulhs! I can get this working now, but I'm wondering how to access the store's own methods (setMessageAction() and clearMessageAction()) from the components instead of creating new methods, as it looks like you've done in this example. (I'm a noob, obviously.) Thanks for any help anyone can provide!

tinymachine

9 years ago

Level 1

Oh, looks like it might be as simple as changing...

...
updateShared: function() {
  this.shared.message += ' from Shared1'
}
...

to something like...

...
updateShared: function() {
  Store.setMessageAction(' from Shared1')
}
...

All ears if you know a better way, though!

Please or to participate in this conversation.