0.0.5 • Published 7 years ago
vuex-scroll v0.0.5
Vuex Scroll
Keep vuex state updated with scroll stats
This library packs some helpers to keep scroll state in your Vuex store. It uses scroll-events under the hood.
Usage
This lib comes with 2 helpers—a Vue mixin and a Vuex plugin. Use them both to get started. (N.B. vuex-scroll
only supports scrolling on window
at this time. See below for roadmap)
index.js
import Vue from 'vue'
import { vuexScrollMixin} from 'vuex-store'
const scrollMixin = vuexScrollMixin({
delay: 100 // Debounce delay
})
...
export new Vue({
mixins: [scrollMixin],
...
})
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import { vuexScroll } from 'vuex-store'
Vue.use(Vuex)
...
export new Vuex.Store({
modules: { vuexScroll },
...
})
Once you've included both, you should have a module in your Vuex store which looks like:
{
vuexScroll: {
direction: null // 1 or -1
progress: null // Y distance in px
speed: null // Number representing speed
status: null // start, stop or progress
}
}
Inject this into your components to get reactive updates when the window scrolls (see: https://vuex.vuejs.org/en/modules.html)
_component.vue
import 'mapState' from 'vuex'
export default {
computed: {
...mapState('vuexScroll', ['progress'])
}
}
Todo
- Tests ⚠️
- Enable passing a selector in as an option to listen for scroll events on a specific object.
- Enable specifying horizontal as an option
Contribute
Please submit issues/PRs. Make sure your code passes yarn test
and to do a yarn build
before pushing.