Nuxt acces vuex store inside mixin

Viewed 794

I m making small mixin for driving animations based on how user is crawling through page and I need to have access to data stored in Vuex store from that mixin. Any ides how to pass data from vuex store there, I am getting mad.

pages/index.vue

import Vue from 'vue'
import {ToplevelAnimations} from '~/mixins/toplevel_animations'

export default Vue.extend({

    mixins: [
       ToplevelAnimations
    ]
        
})

mixins/toplevel_animations.js

 export const ToplevelAnimations = {

    transition(to, from) { 
        // some logic, here I need to access routes stored in store
        return (to_index < from_index ? 'switch-to-left' : 'switch-to-right');
    }
   
}

store/index.js

import {StoreExtensions} from "~/plugins/store_extensions.js";

export const state = () => ({

    MAIN_NAV_LINKS: [
        {
            path: '/',
            title: 'Domov',
            order: 1
        },
        // ...etc
    ],

    CURRENT_PAGE_INDEX: 1

})

export const getters = {

    getMainNavLinks: (state, getters) => {
        return state.MAIN_NAV_LINKS
    }
    // ..etc
}

export const mutations = {

    setCurrentPageIndex(index) {
        state.CURRENT_PAGE_INDEX = index
    } 
    // ...etc
}

export const actions = {
  
  nuxtServerInit ({ commit }, req ) {
    var page_index = StoreExtensions.calculatePageIndex(req.route.path, state.MAIN_NAV_LINKS)
    mutations.setCurrentPageIndex(page_index)
  }
}
1 Answers

I never used Vue.extend(), always using .vue files, so it might be different (although it should not). From my experience with mixins in both Vue and Nuxt seems that mixins receive the relevant this context when they are assigned to components. So for me using simple this.$store worked.

Related