Appearance

Route Params Mixin ​

File Information ​

  • Path: mixins/routeParams.js
  • Purpose: Route parameter utilities and computed properties

Overview ​

The Route Params mixin provides computed properties for easy access to route parameters and related state. It simplifies accessing workspace IDs, instance IDs, route names, and store state from components.

Key Features ​

  1. Route Parameter Access

    • Workspace ID from route
    • Instance ID from route or store
    • Current route name

  2. Store Integration

    • DAM instance access
    • Instance fetching state
    • Store state synchronization

  3. Computed Properties

    • Reactive route parameters
    • Automatic updates on route change

Computed Properties ​

currentRouteName ​

Returns current route name:

  • Accesses $route.name
  • Returns route name string
  • Updates automatically on route change

routeInstanceId ​

Returns DAM instance ID:

  • First checks $route.params.instance_id
  • Falls back to $store.state.dam.damInstance?.id
  • Returns instance ID or null

Logic:

javascript
routeInstanceId() {
  return this.$route.params.instance_id || 
         this.$store.state.dam.damInstance?.id
}

fetchingInstances ​

Returns instance fetching state:

  • Accesses $store.state.dam.fetchingInstances
  • Returns boolean indicating if instances are being fetched
  • Used for loading states

routeWorkspaceId ​

Returns workspace ID from route:

  • Accesses $route.params.workspace_id
  • Returns workspace ID string
  • Updates automatically on route change

Usage Examples ​

Basic Usage ​

vue
<script>
import routeParams from '~/mixins/routeParams'

export default {
  mixins: [routeParams],
  methods: {
    async loadData() {
      // Use computed properties
      const response = await this.$axios.get(
        `/api/workspaces/${this.routeWorkspaceId}/dam/instances/${this.routeInstanceId}/assets`
      )
      return response.data
    }
  }
}
</script>

With Route Name ​

vue
<template>
  <div>
    <p v-if="currentRouteName.includes('dam')">
      DAM Module
    </p>
  </div>
</template>

<script>
import routeParams from '~/mixins/routeParams'

export default {
  mixins: [routeParams]
}
</script>

With Instance State ​

vue
<template>
  <div>
    <v-progress-circular v-if="fetchingInstances" />
    <div v-else>
      Instance ID: {{ routeInstanceId }}
    </div>
  </div>
</template>

<script>
import routeParams from '~/mixins/routeParams'

export default {
  mixins: [routeParams]
}
</script>

Integration Points ​

  • All Pages: Route parameter access
  • DAM Store: Instance state
  • API Calls: Workspace/instance scoped calls
  • Components: Route context

Notes for Development ​

  • Mixin provides simple route parameter access
  • Computed properties are reactive
  • Instance ID has fallback to store
  • Route name useful for conditional logic
  • Minimal overhead, just computed properties