Nuxt의 구성 API에서 vuex 맵 도우미를 사용하는 방법

Nuxt의 구성 API에서 vuex 맵 도우미를 사용하는 방법

vuex map helper 기능을 어떻게 사용하는지 많은 시간을 소비했지만 결국 이해하지 못했습니다.

이제 이런 게 생겼어요.

setup (_, { root: { $store } }) {
    onMounted(() => {
      $store.commit('app/setApplicationWidth', innerWidth)
      console.log($store.getters['app/getApplicationWidth'])
    })
  }

그럼 컴포지션 API에서 mapGetters와 mapMutations를 어떻게 사용할 수 있을까요?

내 vuex 스토어는 다음과 같습니다. /store/app.ts

import { GetterTree, MutationTree, ActionTree } from 'vuex'

export const state = () => ({
  appWidth: <Number> 0
})

export type RootState = ReturnType<typeof state>

export const mutations: MutationTree<RootState> = {
  setApplicationWidth (state: any, payload: Number) {
    state.appWidth = payload
  }
}

export const getters: GetterTree<RootState, RootState> = {
  getApplicationWidth (state: any): Number {
    return state.appWidth
  }
}

export const actions: ActionTree<RootState, RootState> = {}

한 가지 옵션은vuex-composition-helpers 여기. 대충 검사해 보니 효과가 있는 것 같아요.하지만, 여러분이 주목하고 싶은 몇 가지 딸꾹질이 있기 때문에, 여러분은 좋은 출발을 하게 됩니다.

1. 를 추가하여 변환해야 합니다.nuxt.config.js:

  build: {
...
    transpile: ['vuex-composition-helpers']
  }

그렇지 않으면 알 수 없는 "unknown 키워드"가 표시됩니다.export" 에러입니다.

2. 중첩된 스토어는 대체를 사용합니다.*Namespaced*메서드:

import { useNamespacedGetters } from 'vuex-composition-helpers'

export default defineComponent({
...
  setup(_props, context) {
    const { articles, articlesInfo } = useNamespacedGetters('articles', [
      'articles',
      'articlesInfo',
    ])

대체적으로 '원시' 방식의 사용법보다 조금 더 낫습니다.computed스토어에서 직접:

import { computed } from '@nuxtjs/composition-api'
...
    const articles2 = computed(
      () => context.root.$store.getters['articles/articles']
    )

언급URL : https://stackoverflow.com/questions/64672177/how-to-use-vuex-map-helpers-in-composition-api-in-nuxt