Nuxt는 mixin 내의 vuex 스토어에 액세스합니다.

Nuxt는 mixin 내의 vuex 스토어에 액세스합니다.

사용자가 페이지를 기어다니는 방법에 따라 애니메이션을 구동하기 위한 작은 믹스인을 만들고 있으며, 이 믹스인에서 Vuex 스토어에 저장된 데이터에 액세스할 수 있어야 합니다.vuex 스토어에서 데이터를 전송하는 방법을 알면 화가 납니다.

페이지/index.vue

import Vue from 'vue'
import {ToplevelAnimations} from '~/mixins/toplevel_animations'

export default Vue.extend({

    mixins: [
       ToplevelAnimations
    ]
        
})

mixins / toplevel _ animations . syslog

 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.displaces

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 파일을 사용하기 때문에 다를 수 있습니다.Vue와 Nuxt 양쪽에서 mixin을 사용한 경험으로 볼 때 mixin은 관련 정보를 수신합니다.this콘텍스트가 표시됩니다.그래서 저는 심플하게this.$store일했다.

언급URL : https://stackoverflow.com/questions/64000638/nuxt-acces-vuex-store-inside-mixin