Get More Out of Vue and Kendo UI Using Vuex

This short post will highlight the basics of using the Kendo UI for Vue components with the Vuex library.

The Vuex library is the suggested (by Vue) utility to implement the Flux pattern in your Vue app. It enables you to manage states and have a clean data layer, separated from the presentation layer of your app. If you haven't read the Vuex documentation, I strongly suggest you go through it and get back to this article.

The sample app that we are going to start creating here is available for you in this GitHub repository: kendo-with-vuex. You can clone the repo, play with it and have fun with Kendo UI, Vue and Vuex.

Reactivity in Kendo UI Components

The Kendo UI for Vue components have built-in functionality to support the native Vue reactivity. That enables Vuex to automatically propagate changes to the Kendo UI components and update them along with data and state changes.

That means that any props that are passed to a Kendo UI component will propagate changes (when changed) and update the widget that the Kendo UI component implements.

Now, let's include Vuex in our basic Vue app. If you are wondering how to create a simple Vue app with Kendo UI, you can check out the article, Get Going with Kendo UI & Vue: A GIF Guide, or the Getting Started with Kendo UI and Vue Video Tutorial. If you are planning a Vue project, we recommend downloading the whitepaper, Planning a Vue Application.

Including Vuex and Kendo UI Grid in Your App

Nothing too fancy here. Just follow the guide from the Vuex documentation:

1. Install the library via npm

npm install vuex --save

2. And include it in your app

import Vuex from 'vuex'
Vue.use(Vuex)

3. Finally, install the Kendo UI Grid component for Vue

Prepare the Vuex Store

1. Create an assets folder to put the data that we are going to use: customers.json
2. Create the customers.json file and paste the exact code from this link: customers.json
3. Create the store folder with an index.js file for the Vuex setup
4. Import Vue, Vuex and the customers.json file and call Vue.use(Vuex) to install the Vuex plugin to Vue:

import Vue from 'vue'
import Vuex from 'vuex'
import customers from '../assets/customers'

Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    customers: JSON.parse(JSON.stringify(customers))
  }
})

5. Include the created Vuex store in the main.js and define it in the Vue app:

import Vue from 'vue'
import App from './App.vue'
import store from './store'
import 'babel-polyfill'
import '@progress/kendo-ui'
import '@progress/kendo-theme-default/dist/all.css'
import { Grid, GridInstaller } from '@progress/kendo-grid-vue-wrapper'

Vue.use(GridInstaller)
new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

6. In App.vue, add the kendo-grid component and configure it to use the Vuex state to bind the customers to the Kendo UI Grid:

<template>
  <div id="app">
    <kendo-grid ref="grid" :data-source="customers" :editable="'inline'">
      <kendo-grid-column field="ContactName" title="Contact Name">
      <kendo-grid-column field="ContactTitle" title="Contact Title">
      <kendo-grid-column field="CompanyName" title="Company Name">
      <kendo-grid-column field="Country">
      <kendo-grid-column :command="['edit', 'destroy']">
    </kendo-grid>
  </div>
</template>
<script>
  export default {
    name: 'app',
    computed: {
      customers () {
        return new kendo.data.DataSource({
          data: this.$store.state.customers
        })
      }
    }
  }
</script>

Running the app now will render a Kendo UI Grid bound to the customers data from the customers.json file. Up to now we used the Vuex library to have a separate layer that reads the data. Editing the items from the Grid, however, will not communicate with the state.

Using Vuex Mutations

For simplicity, in this case, we will use mutations to communicate with the Vuex state.

getters: {
  customerIds: state => {
    return state.customers.map((item) => {
      return item.CustomerID
    })
  }
},
mutations: {
  edit (state, customer) {
    var foundCustomer = state.customers.find((cust) => {
      return cust.CustomerID === customer.CustomerID
    })
    var index = state.customers.indexOf(foundCustomer)
    state.customers[index] = customer
  },
  remove (state, index) {
    state.customers.splice(index, 1)
  }
}

Sync Kendo UI Events with Mutations

Using the Kendo UI Events enables you to control which exact mutation or action to use to dispatch a change. Plus, it gives you the power to programmatically interact with the widget and pass additional data to Vuex to accomplish more complex tasks. For our demo, using the save and remove events is enough.

<kendo-grid ref="grid" :data-source="customers" :editable="'inline'" @save="onSave" @remove="onRemove">

methods: {
  onSave (ev) {
    this.$store.commit('edit', ev.model.toJSON())
    ev.sender.refresh()
  },
  onRemove (ev) {
    this.$store.commit('remove', ev.row)
  }
}

You might have noticed two particular things implemented in the save handled - the toJSON() and refresh() methods.

The toJSON() method strips out any methods and properties injected by the Kendo UI DataSource, thus giving Vue an object with fewer fields to observe.

Calling refresh() will close the editing UI for the case. This will not be needed if a service is used along with the DataSource. The refreshing is needed particularly when binding with local data.

If you run the app now you’ll see nothing new that Kendo UI Grid does not already do; listing, editing, and removing items. But behind the scenes all the editing is synced with Vuex and controlled using the Flux pattern.

But how do we see the results?

Using Chrome's Vue.js Devtools Plugin

This tool not only enables you to inspect components, events, but also gives you all the information of what happens with Vuex. Install the plugin and test it out:

1. Run the app that we built
2. Press F12 to open the browser dev tools and you should see a Vue tab and inside a Vuex tab
3. You should be able to now see the getters and the states implemented in the store; inspect the first item, a plain object
4. Now use the Kendo UI Grid to edit the first row and change a field
5. Once you press the Update button you should see how the state of the object in the devtools has changed too

This is how you can be certain that the Vuex implementation works and that the Kendo UI components you are using in your app are integrating Vuex properly.

Getting Even More

This was short and fairly easy to get done. You can check out a more advanced sample app in our GitHub repo, kendo-with-vuex, which uses a router, several Kendo UI components synced with Vuex and so on. Check it out, clone it, play with it, learn Kendo UI and have fun developing your app.

Share your thoughts about Vue, Vuex and Kendo UI in a comment (below). Let us know if you are using them successfully in your apps. Thank you for reading my article and sharing the coolness of Vue with me.