반응형
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
반응형
'sourcecode' 카테고리의 다른 글
MySQL 스키마, 어느 쪽이 성능이 더 우수합니까?M-N 관계를 지정하거나 모든 관련 ID를 문자열로 저장하시겠습니까? (0) | 2022.08.14 |
---|---|
nuxt.js에 Vue 패키지를 설치하는 방법 (0) | 2022.08.14 |
입력에 초점을 맞추고 @click을 하면 Vue.js 입력 제안 표시 (0) | 2022.08.13 |
Vue를 사용하여 CSS를 무한 애니메이션화하는 방법 (0) | 2022.08.13 |
컴파일 시 할당된 메모리'는 무엇을 의미합니까? (0) | 2022.08.13 |