Question

我正在根据用户在页面上的爬行方式来制作小型混合动画来驱动动画，我需要从该混合动画访问存储在Vuex存储中的数据。任何想法如何从vuex存储在那里的数据传递，我都很生气。

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)
  }
}

Nuxt将Vuex存储在Mixin内部

0 个答案: