커스텀 vue 패키지가 Vuex 상태의 일부를 내보낼 수 있으며, 이 패키지를 Laravel 프로젝트의 Vuex 상태 내에서 Import/사용할 수 있습니다.

커스텀 vue 패키지가 Vuex 상태의 일부를 내보낼 수 있으며, 이 패키지를 Laravel 프로젝트의 Vuex 상태 내에서 Import/사용할 수 있습니다.

헤이 Stackoverflow 커뮤니티!

커스텀 Vue 컴포넌트 라이브러리/패키지도 Import하고 있는 Larabel/Vue 프로젝트의 Vuex에 대해 질문이 있습니다.

패키지에 특정 Vuex 상태(상태, 돌연변이, getter 등)를 내보내고 싶습니다.

Laravel Project의 Vuex Instance와 함께 사용할 수 있는 부품을 원합니다.이를 통해 프로젝트가 커스텀 패키지의 상태 조각과 Laravel 프로젝트에 고유한 상태 조각을 하나의 Vuex 인스턴스에서 사용할 수 있기를 바랍니다.

이것이 가능한가, 아니면 좋은 접근인가?패키지는 재사용이 가능하며 프로젝트 고유의 것은 아니지만, Laravel 프로젝트가 자체 Vuex 상태에서 패키지 상태를 읽거나 조작하거나 상호 작용할 수 있다면 이상적입니다.

다음은 관련된 코드 스니펫입니다.

커스텀 컴포넌트 라이브러리 - main.js

import ExampleComponent from './components/ExampleComponent.vue'
import AnotherComponent from './components/AnotherComponent.vue'

export {
  ExampleComponent,
  AnotherComponent
}

Laravel 프로젝트 - app.js

import {ExampleComponent, AnotherComponent} from 'vue-components-library'

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
      filterData: {
        page: 1
      },
      fetchResultsFlag: 0
    },
    mutations: {
      updateFilterData: (state, filterData) => {
        Object.entries(filterData).forEach(([key, value]) => {
          state.filterData[key] = value
        });
        state.fetchResultsFlag = 1
      },
      incrementPage: (state) => {
        state.filterData.page++
        state.fetchResultsFlag = 1
      },
      resetFetchResultsFlag: (state) => {
        state.fetchResultsFlag = 0
      }
    },
    getters: {
      filterData: state => {
        return state.filterData
      },
      fetchResultsFlag: state => {
        return state.fetchResultsFlag
      },
      page: state => {
        return state.filterData.page
      }
    }
  })

const app = new Vue({
    el: '#app',
    store: store
});

어떠한 도움이나 통찰력도 대단히 감사합니다!

고마워요.

언급URL : https://stackoverflow.com/questions/65704862/can-a-custom-vue-package-export-pieces-of-a-vuex-state-that-could-then-be-impor