구성 요소 라이브러리의 Vuex 저장소

구성 요소 라이브러리의 Vuex 저장소

컴포넌트 라이브러리를 구축하고 있는데 일부 컴포넌트는 Vuex 스토어를 인식해야 합니다.내 컴포넌트 라이브러리의 텍스트 박스 컴포넌트의 예를 들어보겠습니다.컴포넌트가 마운트되면 "이것"을 볼 수 있습니다.$store" 가 입력됩니다.그러나 기본 응용 프로그램에서 스토어를 업데이트하면 변경 내용이 구성 요소 라이브러리의 텍스트 상자 구성 요소에 반영되지 않습니다."vue-property-decorator"를 사용하여 Typescript에 컴포넌트를 쓰고 있습니다.다음은 스토어가 라이브러리에 전달되는 방법에 대한 코드 조각입니다.

main.ts(컴포넌트 라이브러리)

import * as components from './components'

const ComponentLibrary = {
  install(Vue, options) {
    if (!options || !options.store) {
      throw new Error('Please initialise plugin with a Vuex store.')
    }
    
    // components
    for (const componentName in components) {
      const component = components[componentName]
      Vue.component(component.name, component)
    }
  }
}

export default ComponentLibrary

if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(ComponentLibrary)
}

main.ts(메인 프로젝트)

import store from './store/store';
import ComponentLib from 'component-library/src/main';

Vue.use(ComponentLib, { store });

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');

store.ts(메인 프로젝트)

import Vue from 'vue';
import Vuex from 'vuex';
import modules from './modules';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: modules,
});

모듈에는 개개의 스토어 파일 /* Common.store.ts */가 포함되어 있습니다.

const state = {
    mode: [], //Default mode 
};

const mutations = {
    ADD_MODE(state, data) {
        let index = state.mode.findIndex(o => o.routeName == data.routeName);
        index !== -1 ? state.mode[index] = data : state.mode.push(data);
    },
};

const actions = {
  AddMode({ commit, state }, data) {
    commit('ADD_MODE', data);
  }
}

const getters = {
mode: (state) => {
    return state.mode;
  },
}

export default {
  namespaced: true,
  mutations,
  state,
  getters,
  actions
};

이제 TextBox 컴포넌트에 접속하려고 합니다.$store.state.Common.mode는 Vue Devtools에서 모드 값을 업데이트할 때 구성 요소 라이브러리의 값이 업데이트되지 않습니다.내가 접속하면.$store.state.메인 어플리케이션의 Common.mode에서 실시간으로 변경을 확인할 수 있습니다.제가 무엇을 빠뜨리고 있나요?잘 부탁드립니다.또, 더 필요한 정보가 있으면 가르쳐 주세요.

언급URL : https://stackoverflow.com/questions/63371720/vuex-store-in-component-library