DevExtreme Vue - LocalStore Props

This section describes properties that configure the LocalStore.

data

Specifies the store's associated array.

Type:

Array<any>

jQuery
JavaScript
 var store = new DevExpress.data.LocalStore({ data: [ { id: 1, name: "John Doe" }, // ... ] });
Angular
TypeScript
 import LocalStore from "devextreme/data/local_store"; // ... export class AppComponent { store: LocalStore; constructor() { this.store = new LocalStore({ data: [ { id: 1, name: "John Doe" }, // ... ] }) } }
Vue
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>
React
App.js
 // ... import ArrayStore from 'devextreme/data/array_store'; const store = new ArrayStore({ data: [ { id: 1, name: 'John Doe' }, // ... ] }); class App extends React.Component { // ... } export default App;

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.

jQuery
JavaScript
 var store = new DevExpress.data.LocalStore({ // ... errorHandler: function (error) { console.log(error.message); } });
Angular
TypeScript
 import LocalStore from "devextreme/data/local_store"; // ... export class AppComponent { store: LocalStore; constructor() { this.store = new LocalStore({ // ... errorHandler: function (error) { console.log(error.message); } }) } }
Vue
App.vue
 <script> import LocalStore from 'devextreme/data/local_store'; const store = new LocalStore({ // ... errorHandler: (error) => { console.log(error.message); } }); export default { // ... data() { return { store } } } </script>
React
App.js
 // ... import LocalStore from 'devextreme/data/local_store'; const store = new LocalStore({ // ... errorHandler: (error) => { console.log(error.message); } }); class App extends React.Component { // ... } export default App;

flushInterval

Specifies a delay in milliseconds between when data changes and the moment these changes are saved in the local storage. Applies only if immediate is false.

Type:

Number

Default Value: 10000
jQuery
JavaScript
 var store = new DevExpress.data.LocalStore({ // ... immediate: false, flushInterval: 3000 });
Angular
TypeScript
 import LocalStore from "devextreme/data/local_store"; // ... export class AppComponent { store: LocalStore; constructor() { this.store = new LocalStore({ // ... immediate: false, flushInterval: 3000 }) } }
Vue
App.vue
 <script> import LocalStore from 'devextreme/data/local_store'; const store = new LocalStore({ // ... immediate: false, flushInterval: 3000 }); export default { // ... data() { return { store } } } </script>
React
App.js
 // ... import LocalStore from 'devextreme/data/local_store'; const store = new LocalStore({ // ... immediate: false, flushInterval: 3000 }); class App extends React.Component { // ... } export default App;

immediate

Specifies whether the LocalStore saves changes in the local storage immediately.

Type:

Boolean

Default Value: false
See Also

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:

jQuery
JavaScript
 var store = new DevExpress.data.LocalStore({ // ... key: ["ProductID", "ProductCode"] });
Angular
TypeScript
 import LocalStore from "devextreme/data/local_store"; // ... export class AppComponent { store: LocalStore; constructor() { this.store = new LocalStore({ // ... key: ["ProductID", "ProductCode"] }) } }
Vue
App.vue
 <script> import LocalStore from 'devextreme/data/local_store'; const store = new LocalStore({ // ... key: ['ProductID', 'ProductCode'] }); export default { // ... data() { return { store } } } </script>
React
App.js
 // ... import LocalStore from 'devextreme/data/local_store'; const store = new LocalStore({ // ... key: ['ProductID', 'ProductCode'] }); class App extends React.Component { // ... } export default App;

name

Specifies the name under which data should be saved in the local storage. The dx-data-localStore- prefix will be added to the name.

Type:

String

jQuery
JavaScript
 var store = new DevExpress.data.LocalStore({ // ... name: "myStore" });
Angular
TypeScript
 import LocalStore from "devextreme/data/local_store"; // ... export class AppComponent { store: LocalStore; constructor() { this.store = new LocalStore({ // ... name: "myStore" }) } }
Vue
App.vue
 <script> import LocalStore from 'devextreme/data/local_store'; const store = new LocalStore({ // ... name: 'myStore' }); export default { // ... data() { return { store } } } </script>
React
App.js
 // ... import LocalStore from 'devextreme/data/local_store'; const store = new LocalStore({ // ... name: 'myStore' }); class App extends React.Component { // ... } export default App;

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.

jQuery
JavaScript
 var store = new DevExpress.data.LocalStore({ onInserted: function (values, key) { // Your code goes here } });
Angular
TypeScript
 import LocalStore from "devextreme/data/local_store"; // ... export class AppComponent { store: LocalStore; constructor() { this.store = new LocalStore({ onInserted: function (values, key) { // Your code goes here } }) } }
Vue
App.vue
 <script> import LocalStore from 'devextreme/data/local_store'; const store = new LocalStore({ // ... onInserted: function (values, key) { // Your code goes here } }); export default { // ... data() { return { store } } } </script>
React
App.js
 // ... import LocalStore from 'devextreme/data/local_store'; const store = new LocalStore({ // ... onInserted: function (values, key) { // Your code goes here } }); class App extends React.Component { // ... } export default App;

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.

jQuery
JavaScript
 var store = new DevExpress.data.LocalStore({ onInserting: function (values) { // Your code goes here } });
Angular
TypeScript
 import LocalStore from "devextreme/data/local_store"; // ... export class AppComponent { store: LocalStore; constructor() { this.store = new LocalStore({ onInserting: function (values) { // Your code goes here } }) } }
Vue
App.vue
 <script> import LocalStore from 'devextreme/data/local_store'; const store = new LocalStore({ // ... onInserting: function (values, key) { // Your code goes here } }); export default { // ... data() { return { store } } } </script>
React
App.js
 // ... import LocalStore from 'devextreme/data/local_store'; const store = new LocalStore({ // ... onInserting: function (values, key) { // Your code goes here } }); class App extends React.Component { // ... } export default App;

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.

jQuery
JavaScript
 var store = new DevExpress.data.LocalStore({ onLoaded: function (result) { // Your code goes here } });
Angular
TypeScript
 import LocalStore from "devextreme/data/local_store"; // ... export class AppComponent { store: LocalStore; constructor() { this.store = new LocalStore({ onLoaded: function (result) { // Your code goes here } }) } }
Vue
App.vue
 <script> import LocalStore from 'devextreme/data/local_store'; const store = new LocalStore({ // ... onLoaded: function (result) { // Your code goes here } }); export default { // ... data() { return { store } } } </script>
React
App.js
 // ... import LocalStore from 'devextreme/data/local_store'; const store = new LocalStore({ // ... onLoaded: function (result) { // Your code goes here } }); class App extends React.Component { // ... } export default App;

onLoading

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

Type:

Function

Function parameters:
loadOptions:

LoadOptions

Data processing settings.

jQuery
JavaScript
 var store = new DevExpress.data.LocalStore({ onLoading: function (loadOptions) { // Your code goes here } });
Angular
TypeScript
 import LocalStore from "devextreme/data/local_store"; // ... export class AppComponent { store: LocalStore; constructor() { this.store = new LocalStore({ onLoading: function (loadOptions) { // Your code goes here } }) } }
Vue
App.vue
 <script> import LocalStore from 'devextreme/data/local_store'; const store = new LocalStore({ // ... onLoading: function (loadOptions) { // Your code goes here } }); export default { // ... data() { return { store } } } </script>
React
App.js
 // ... import LocalStore from 'devextreme/data/local_store'; const store = new LocalStore({ // ... onLoading: function (loadOptions) { // Your code goes here } }); class App extends React.Component { // ... } export default App;

onModified

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

Type:

Function

jQuery
JavaScript
 var store = new DevExpress.data.LocalStore({ onModified: function () { // Your code goes here } });
Angular
TypeScript
 import LocalStore from "devextreme/data/local_store"; // ... export class AppComponent { store: LocalStore; constructor() { this.store = new LocalStore({ onModified: function () { // Your code goes here } }) } }
Vue
App.vue
 <script> import LocalStore from 'devextreme/data/local_store'; const store = new LocalStore({ // ... onModified: function () { // Your code goes here } }); export default { // ... data() { return { store } } } </script>
React
App.js
 // ... import LocalStore from 'devextreme/data/local_store'; const store = new LocalStore({ // ... onModified: function () { // Your code goes here } }); class App extends React.Component { // ... } export default App;

onModifying

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

Type:

Function

jQuery
JavaScript
 var store = new DevExpress.data.LocalStore({ onModifying: function () { // Your code goes here } });
Angular
TypeScript
 import LocalStore from "devextreme/data/local_store"; // ... export class AppComponent { store: LocalStore; constructor() { this.store = new LocalStore({ onModifying: function () { // Your code goes here } }) } }
Vue
App.vue
 <script> import LocalStore from 'devextreme/data/local_store'; const store = new LocalStore({ // ... onModifying: function () { // Your code goes here } }); export default { // ... data() { return { store } } } </script>
React
App.js
 // ... import LocalStore from 'devextreme/data/local_store'; const store = new LocalStore({ // ... onModifying: function () { // Your code goes here } }); class App extends React.Component { // ... } export default App;

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.

jQuery
JavaScript
 var store = new DevExpress.data.LocalStore({ onPush: function(changes) { // Your code goes here } });
Angular
TypeScript
 import LocalStore from "devextreme/data/local_store"; // ... export class AppComponent { store: LocalStore; constructor() { this.store = new LocalStore({ onPush: (changes) => { // Your code goes here } }) } }
Vue
App.vue
 <script> import LocalStore from 'devextreme/data/local_store'; const store = new LocalStore({ // ... onPush: (changes) => { // Your code goes here } }); export default { // ... data() { return { store } } } </script>
React
App.js
 // ... import LocalStore from 'devextreme/data/local_store'; const store = new LocalStore({ // ... onPush: (changes) => { // Your code goes here } }); class App extends React.Component { // ... } export default App;

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.

jQuery
JavaScript
 var store = new DevExpress.data.LocalStore({ onRemoved: function (key) { // Your code goes here } });
Angular
TypeScript
 import LocalStore from "devextreme/data/local_store"; // ... export class AppComponent { store: LocalStore; constructor() { this.store = new LocalStore({ onRemoved: function (key) { // Your code goes here } }) } }
Vue
App.vue
 <script> import LocalStore from 'devextreme/data/local_store'; const store = new LocalStore({ // ... onRemoved: function (key) { // Your code goes here } }); export default { // ... data() { return { store } } } </script>
React
App.js
 // ... import LocalStore from 'devextreme/data/local_store'; const store = new LocalStore({ // ... onRemoved: function (key) { // Your code goes here } }); class App extends React.Component { // ... } export default App;

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.

jQuery
JavaScript
 var store = new DevExpress.data.LocalStore({ onRemoving: function (key) { // Your code goes here } });
Angular
TypeScript
 import LocalStore from "devextreme/data/local_store"; // ... export class AppComponent { store: LocalStore; constructor() { this.store = new LocalStore({ onRemoving: function (key) { // Your code goes here } }) } }
Vue
App.vue
 <script> import LocalStore from 'devextreme/data/local_store'; const store = new LocalStore({ // ... onRemoving: function (key) { // Your code goes here } }); export default { // ... data() { return { store } } } </script>
React
App.js
 // ... import LocalStore from 'devextreme/data/local_store'; const store = new LocalStore({ // ... onRemoving: function (key) { // Your code goes here } }); class App extends React.Component { // ... } export default App;

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.

jQuery
JavaScript
 var store = new DevExpress.data.LocalStore({ onUpdated: function (key, values) { // Your code goes here } });
Angular
TypeScript
 import LocalStore from "devextreme/data/local_store"; // ... export class AppComponent { store: LocalStore; constructor() { this.store = new LocalStore({ onUpdated: function (key, values) { // Your code goes here } }) } }
Vue
App.vue
 <script> import LocalStore from 'devextreme/data/local_store'; const store = new LocalStore({ // ... onUpdated: function (key, values) { // Your code goes here } }); export default { // ... data() { return { store } } } </script>
React
App.js
 // ... import LocalStore from 'devextreme/data/local_store'; const store = new LocalStore({ // ... onUpdated: function (key, values) { // Your code goes here } }); class App extends React.Component { // ... } export default App;

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.

jQuery
JavaScript
 var store = new DevExpress.data.LocalStore({ onUpdating: function (key, values) { // Your code goes here } });
Angular
TypeScript
 import LocalStore from "devextreme/data/local_store"; // ... export class AppComponent { store: LocalStore; constructor() { this.store = new LocalStore({ onUpdating: function (key, values) { // Your code goes here } }) } }
Vue
App.vue
 <script> import LocalStore from 'devextreme/data/local_store'; const store = new LocalStore({ // ... onUpdating: function (key, values) { // Your code goes here } }); export default { // ... data() { return { store } } } </script>
React
App.js
 // ... import LocalStore from 'devextreme/data/local_store'; const store = new LocalStore({ // ... onUpdating: function (key, values) { // Your code goes here } }); class App extends React.Component { // ... } export default App;