Nuxt acces vuex store inside mixin答案

【问题标题】：Nuxt acces vuex store inside mixinNuxt 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)
  }
}

【问题讨论】：

标签： vuex nuxt.js store

【解决方案1】：

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

【讨论】：