The context object contains all the current state and configuration of a VueList instance. It’s automatically passed to the request handler and state manager methods.
Context Properties
The context object is a computed property that includes:
The API endpoint URL for fetching data. This is passed from the endpoint prop of the VueList component. version
string | number
default:"1"
Version identifier used by the state manager to identify configuration changes. When the version changes, the state manager can clean up stale states. Additional metadata passed from the meta prop. This can be any data you want to include in the request.meta: {
userId: 123,
teamId: 456
}
Current search query string. Current page number (1-based). Number of items to fetch per page. Name of the field to sort by. Sort order direction. Either 'asc' or 'desc'. Current filter values from the v-model:filters binding.filters: {
status: 'active',
role: 'admin'
}
Settings for each attribute/column, including visibility.attrSettings: {
name: { visible: true },
email: { visible: true },
phone: { visible: false }
}
Indicates whether the current request is a refresh action. This is true when the refresh() method is called, false otherwise. Usage in Request Handler
The context object is passed to your request handler:
app.use(VueList, {
requestHandler: async (context) => {
console.log('Current page:', context.page)
console.log('Search query:', context.search)
console.log('Filters:', context.filters)
// Make API request with context data
const response = await fetch(context.endpoint, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
page: context.page,
per_page: context.perPage,
search: context.search,
sort_by: context.sortBy,
sort_order: context.sortOrder,
filters: context.filters,
...context.meta
})
})
const data = await response.json()
return {
items: data.items,
count: data.total
}
}
})
Usage in State Manager
The context is also passed to state manager methods:
app.use(VueList, {
stateManager: {
init: (context) => {
// Check version and clean up if needed
const key = `vuelist-${context.endpoint}-${context.version}`
const saved = localStorage.getItem(key)
if (saved) {
const data = JSON.parse(saved)
if (data.version !== context.version) {
localStorage.removeItem(key)
}
}
},
set: (context) => {
// Save state with version
const key = `vuelist-${context.endpoint}-${context.version}`
localStorage.setItem(key, JSON.stringify(context))
},
get: (context) => {
// Retrieve state
const key = `vuelist-${context.endpoint}-${context.version}`
const saved = localStorage.getItem(key)
return saved ? JSON.parse(saved) : null
}
}
})
The context object is reactive and updates automatically when any state changes.