Vue

Even though Trux was developed with React in mind, getting it working with Vue is just as simple. Like with React, you'll need to add a few things to your components to wire it up, let's take a look.

Connecting

Connecting a Vue component to a Trux store must occur in the mounted lifecycle method. Within this method there are two things you'll have to do.

Set a truxid for your component

You must set a truxid for your component. This must be a unique identifier and will be how the component will be found for disconnection later.

mounted() {
  this.truxid = 'MY_COMPONENT'
}

connect your component to a store

mounted() {
  this.truxid = 'MY_COMPONENT' // set the truxid first
  this.store.connect(this); // connect this component to the store which should be passed in via props
}

You must do this after setting the truxid or Trux will throw a ReferenceError.

Setting your component's storeDidUpdate method

Each component which you connect to a store needs a storeDidUpdate method in order to receive broadcasted updates. In Vue, you can simply set this as one of your component's methods

methods: {
  data: {
    name: 'Frodo'
  },
  storeDidUpdate: () => {
    this.name = this.store.name;
  }
}

Now your component will receive updates from the store when required. It's up to you to choose how you wish to handle these changes inside your storeDidUpdate method.

Disconnecting

If a component is going to be unmounted from the DOM, you must disconnect it from any stores it is connected to within the destroyed lifecycle method. If you do not, then if you update the store at a later time, Vue will throw errors because the connected component will no longer exist.

Since you set a truxid for your component when it mounted, disconnecting is as simple as just calling a single method from the store

destroyed() {
    this.store.disconnect(this);
}

results matching ""

    No results matching ""