Блог

Я создаю небольшие микшеры для анимации вождения, основанные на том, как пользователь просматривает страницу, и мне нужно иметь доступ к данным, хранящимся в хранилище Vuex, из этого микшера. Любые идеи, как передавать данные из хранилища vuex туда, я схожу с ума.

страницы/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)
  }
}
  

Я никогда не использовал Vue.extend() , всегда используя файлы .vue, так что это может быть по-другому (хотя и не должно). Из моего опыта работы с mixins как в Vue, так и в Nuxt кажется, что mixins получают соответствующий this контекст, когда они назначаются компонентам. Так что для меня простое использование this.$store сработало.