DevExtreme Vue - ArrayStore Props

This section describes properties that configure the ArrayStore.

data

Specifies the store's associated array.

Type:

Array<any>

App.vue
  • <script>
  • import ArrayStore from 'devextreme/data/array_store';
  •  
  • const store = new ArrayStore({
  • data: [
  • { id: 1, name: 'John Doe' },
  • // ...
  • ]
  • });
  •  
  • export default {
  • // ...
  • data() {
  • return {
  • store
  • }
  • }
  • }
  • </script>

errorHandler

Specifies the function that is executed when the store throws an error.

Type:

Function

This function accepts a JavaScript Error object as the parameter.

App.vue
  • <script>
  • import ArrayStore from 'devextreme/data/array_store';
  •  
  • const store = new ArrayStore({
  • // ...
  • errorHandler: (error) => {
  • console.log(error.message);
  • }
  • });
  •  
  • export default {
  • // ...
  • data() {
  • return {
  • store
  • }
  • }
  • }
  • </script>

key

Specifies the key property (or properties) that provide(s) key values to access data items. Each key value must be unique.

Type:

String

|

Array<String>

In the following example, the ProductID and ProductCode properties are specified as key properties:

App.vue
  • <script>
  • import ArrayStore from 'devextreme/data/array_store';
  •  
  • const store = new ArrayStore({
  • // ...
  • key: ['ProductID', 'ProductCode']
  • });
  •  
  • export default {
  • // ...
  • data() {
  • return {
  • store
  • }
  • }
  • }
  • </script>

onInserted

A function that is executed after a data item is added to the store.

Type:

Function

Function parameters:
values:

Object

The added data item.

key:

Object

|

String

|

Number

The item's key.

App.vue
  • <script>
  • import ArrayStore from 'devextreme/data/array_store';
  •  
  • const store = new ArrayStore({
  • // ...
  • onInserted: function (values, key) {
  • // Your code goes here
  • }
  • });
  •  
  • export default {
  • // ...
  • data() {
  • return {
  • store
  • }
  • }
  • }
  • </script>

onInserting

A function that is executed before a data item is added to the store.

Type:

Function

Function parameters:
values:

Object

The data item to be added.

App.vue
  • <script>
  • import ArrayStore from 'devextreme/data/array_store';
  •  
  • const store = new ArrayStore({
  • // ...
  • onInserting: function (values, key) {
  • // Your code goes here
  • }
  • });
  •  
  • export default {
  • // ...
  • data() {
  • return {
  • store
  • }
  • }
  • }
  • </script>

onLoaded

A function that is executed after data is loaded to the store.

Type:

Function

Function parameters:
result:

Array<any>

The loaded data.

loadOptions:

LoadOptions

Data processing settings.

App.vue
  • <script>
  • import ArrayStore from 'devextreme/data/array_store';
  •  
  • const store = new ArrayStore({
  • // ...
  • onLoaded: function (result) {
  • // Your code goes here
  • }
  • });
  •  
  • export default {
  • // ...
  • data() {
  • return {
  • store
  • }
  • }
  • }
  • </script>

onLoading

A function that is executed before data is loaded to the store.

Type:

Function

Function parameters:
loadOptions:

LoadOptions

Data processing settings.

App.vue
  • <script>
  • import ArrayStore from 'devextreme/data/array_store';
  •  
  • const store = new ArrayStore({
  • // ...
  • onLoading: function (loadOptions) {
  • // Your code goes here
  • }
  • });
  •  
  • export default {
  • // ...
  • data() {
  • return {
  • store
  • }
  • }
  • }
  • </script>

onModified

A function that is executed after a data item is added, updated, or removed from the store.

Type:

Function

App.vue
  • <script>
  • import ArrayStore from 'devextreme/data/array_store';
  •  
  • const store = new ArrayStore({
  • // ...
  • onModified: function () {
  • // Your code goes here
  • }
  • });
  •  
  • export default {
  • // ...
  • data() {
  • return {
  • store
  • }
  • }
  • }
  • </script>

onModifying

A function that is executed before a data item is added, updated, or removed from the store.

Type:

Function

App.vue
  • <script>
  • import ArrayStore from 'devextreme/data/array_store';
  •  
  • const store = new ArrayStore({
  • // ...
  • onModifying: function () {
  • // Your code goes here
  • }
  • });
  •  
  • export default {
  • // ...
  • data() {
  • return {
  • store
  • }
  • }
  • }
  • </script>

onPush

The function executed before changes are pushed to the store.

Type:

Function

Function parameters:
changes:

Array<any>

Changes passed in the push(changes) method.

App.vue
  • <script>
  • import ArrayStore from 'devextreme/data/array_store';
  •  
  • const store = new ArrayStore({
  • // ...
  • onPush: (changes) => {
  • // Your code goes here
  • }
  • });
  •  
  • export default {
  • // ...
  • data() {
  • return {
  • store
  • }
  • }
  • }
  • </script>

onRemoved

A function that is executed after a data item is removed from the store.

Type:

Function

Function parameters:
key:

Object

|

String

|

Number

The removed data item's key.

App.vue
  • <script>
  • import ArrayStore from 'devextreme/data/array_store';
  •  
  • const store = new ArrayStore({
  • // ...
  • onRemoved: function (key) {
  • // Your code goes here
  • }
  • });
  •  
  • export default {
  • // ...
  • data() {
  • return {
  • store
  • }
  • }
  • }
  • </script>

onRemoving

A function that is executed before a data item is removed from the store.

Type:

Function

Function parameters:
key:

Object

|

String

|

Number

The key of the data item to be removed.

App.vue
  • <script>
  • import ArrayStore from 'devextreme/data/array_store';
  •  
  • const store = new ArrayStore({
  • // ...
  • onRemoving: function (key) {
  • // Your code goes here
  • }
  • });
  •  
  • export default {
  • // ...
  • data() {
  • return {
  • store
  • }
  • }
  • }
  • </script>

onUpdated

A function that is executed after a data item is updated in the store.

Type:

Function

Function parameters:
key:

Object

|

String

|

Number

The updated data item's key.

values:

Object

Updated values.

App.vue
  • <script>
  • import ArrayStore from 'devextreme/data/array_store';
  •  
  • const store = new ArrayStore({
  • // ...
  • onUpdated: function (key, values) {
  • // Your code goes here
  • }
  • });
  •  
  • export default {
  • // ...
  • data() {
  • return {
  • store
  • }
  • }
  • }
  • </script>

onUpdating

A function that is executed before a data item is updated in the store.

Type:

Function

Function parameters:
key:

Object

|

String

|

Number

The key of the data item to be updated.

values:

Object

New values for the data item fields.

App.vue
  • <script>
  • import ArrayStore from 'devextreme/data/array_store';
  •  
  • const store = new ArrayStore({
  • // ...
  • onUpdating: function (key, values) {
  • // Your code goes here
  • }
  • });
  •  
  • export default {
  • // ...
  • data() {
  • return {
  • store
  • }
  • }
  • }
  • </script>