Context Object

Understanding the VueList context object

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:

endpoint · string

The API endpoint URL for fetching data. This is passed from the endpoint prop of the VueList component.

endpoint: '/api/users'

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.

version: 2

meta · any

Additional metadata passed from the meta prop. This can be any data you want to include in the request.

meta: {
  userId: 123,
  teamId: 456
}

search · string

Current search query string.

search: 'john doe'

page · number

Current page number (1-based).

page: 3

perPage · number · default: "25"

Number of items to fetch per page.

perPage: 50

sortBy · string

Name of the field to sort by.

sortBy: 'created_at'

sortOrder · string

Sort order direction. Either 'asc' or 'desc'.

sortOrder: 'desc'

filters · object

Current filter values from the v-model:filters binding.

filters: {
  status: 'active',
  role: 'admin'
}

attrSettings · object

Settings for each attribute/column, including visibility.

attrSettings: {
  name: { visible: true },
  email: { visible: true },
  phone: { visible: false }
}

isRefresh · boolean · default: "false"

Indicates whether the current request is a refresh action. This is true when the refresh() method is called, false otherwise.

isRefresh: true

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.