Nuxt 访问 mixin 内的 vuex 存储

Question

我正在制作一个小型 mixin，用于根据用户如何爬行页面来驱动动画，并且我需要从该 mixin 访问存储在 Vuex 存储中的数据。任何 ide 如何从 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');
    }
   
}

商店/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)
  }
}

Answer 1

我从来没有使用过Vue.extend()，总是使用 .vue 文件，所以它可能会有所不同（尽管不应该）。根据我在 Vue 和 Nuxt 中使用 mixins 的经验，mixinsthis在分配给组件时会收到相关的上下文。所以对我来说使用简单的this.$store工作。