Nuxt acces vuex store inside mixin

Posted 2023-03-16

【中文标题】Nuxt acces vuex store inside mixin

【英文标题】：

【发布时间】：2021-01-08 01:01:02

【问题描述】：

我正在根据用户在页面中的爬行方式制作用于驱动动画的小型 mixin，并且我需要从该 mixin 访问存储在 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');
    
   

存储/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】：

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