DevExtreme Vue - DataSource - store

Configures the store underlying the DataSource.

Type:

Store

|

Store Configuration

|

Array<any>

This property accepts one of the following:

  • Store instance
    An ArrayStore, LocalStore, ODataStore, or CustomStore instance.

  • Store configuration object
    An ArrayStore, LocalStore, or ODataStore configuration object. Make sure to set the type property.

  • Array
    Assigning an array to the store property automatically creates an ArrayStore in the DataSource.

jQuery
JavaScript
var ds = new DevExpress.data.DataSource({
    store: new DevExpress.data.ArrayStore({
        // ArrayStore instance
    })
    // ===== or =====
    store: {
        type: "array",
        // ArrayStore configuration object
    }
    // ===== or =====
    store: [
        { id: 1, name: "John Doe" }
    ]
});
Angular
TypeScript
import DataSource from "devextreme/data/data_source";
import ArrayStore from "devextreme/data/array_store";
// ...
export class AppComponent {
    ds: DataSource;
    constructor() {
        this.ds = new DataSource({
            store: new ArrayStore({
                // ArrayStore instance
            })
            // ===== or =====
            store: {
                type: "array",
                // ArrayStore configuration object
            }
            // ===== or =====
            store: [
                { id: 1, name: "John Doe" }
            ]
        });
    }
}
Vue
App.vue
<script>
import DataSource from 'devextreme/data/data_source';
import ArrayStore from 'devextreme/data/array_store';

const ds = new DataSource({
    store: new ArrayStore({
        // ArrayStore instance
    })
    // ===== or =====
    store: {
        type: 'array',
        // ArrayStore configuration object
    }
    // ===== or =====
    store: [
        { id: 1, name: 'John Doe' }
    ]
});

export default {
    // ...
    data() {
        return {
            ds
        }
    }
}
</script>
React
App.js
// ...
import DataSource from 'devextreme/data/data_source';
import ArrayStore from 'devextreme/data/array_store';

const ds = new DataSource({
    store: new ArrayStore({
        // ArrayStore instance
    })
    // ===== or =====
    store: {
        type: 'array',
        // ArrayStore configuration object
    }
    // ===== or =====
    store: [
        { id: 1, name: 'John Doe' }
    ]
});

class App extends React.Component {
    // ...
}
export default App;

type

Specifies the storage type the DataSource uses.

Type:

String

Accepted Values: 'array' | 'local' | 'odata'

This property accepts one of the following values:

Each store has properties that are detailed in the links above. Declare these properties in the store object.

You can implement custom data access logic as described in the Custom Sources topic if these stores are not suitable.