Skip to content

Bind and sync vue-router query parameters to component scope

License

Notifications You must be signed in to change notification settings

thedamon/vue-router-map-state

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Bind and sync vue-router query parameters to component scope

Installation

npm install vue-router-state-sync

Usage

The API is modelled after Vuex helpers like mapState and mapGetters

// MyComponent.vue
import { syncQueryParams, mapQueryParams } from "vue-router-state-sync";

export default {
  // other options
  computed: {
    ...syncQueryParams(["page", "sort"]),
    ...mapQueryParams(["author"])
  }
};

The queries specifed will become available as computed properties in the template. When using syncQueryparams, the params can be set inside the template as well because the returned computed function has a setter function.

http://mysite.com/posts?page=7&author=John&sort=ASC
<p>On page {{page}} of {{author}}'s articles.</p>
<paginator :page.sync="page"></paginator>
<select-input v-model="sort" :options="['ASC','DESC']"></select-input>

Roadmap

  • Route params? (more difficult because we can't arbitrarily assume routes)
  • Provide more options:
...syncQueryParams(
  'sort',
  {query: 'page', computed: 'listPage', default: 1, type: Number,history: 'replace'}
)

License

MIT

About

Bind and sync vue-router query parameters to component scope

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published