vuex 파일을 분할하려면 어떻게 해야 합니까?

vuex 파일을 분할하려면 어떻게 해야 합니까?

점점 더 많은 변이자들이 있는 vuex 파일을 가지고 있지만 다른 파일로 분할하는 방법이 정확한지 잘 모르겠습니다.

왜냐하면 나는 다음이 있기 때문이다.

const store = new Vuex.Store({ vuex stuff })그 다음 Vue 앱의 메인 선언:const app = new Vue({ stuff })

Vue 컴포넌트로 작업하는 것은 만족스럽고 이미 많은 컴포넌트를 가지고 있지만, 이 컴포넌트는 앱의 최상위 레벨이기 때문에 어떻게 분해해야 할지 모르겠습니다.조언해주시면 감사하겠습니다.

더 복잡한 모듈러 애플리케이션 구조를 만들지 않고 Vuex 파일을 분할하고 싶은 사용자에게는 액션, 돌연변이 및 getter를 다음과 같이 별도의 파일로 분할할 수도 있다고 생각합니다.

└── src
     ├── assets
     ├── components
     └── store
           ├── store.js
           ├── actions.js
           ├── mutations.js
           └── getters.js

store.displaces를 설정합니다.

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

import actions from './actions';
import getters from './getters';
import mutations from './mutations';

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
    someObj: {},
  },
  actions,
  getters,
  mutations,
});

actions.syslog

const actionOne = (context) => {
  ...
  context.commit('PROP1_UPDATED', payload);
};

const actionTwo = (context) => {
  ...
  context.commit('PROP2_UPDATED', payload);
};

export default {
  actionOne,
  actionTwo,
};

돌연변이.복제

const PROP1_UPDATED = (state, payload) => {
  state.someObj.prop1 = payload;
};

const PROP2_UPDATED = (state, payload) => {
  state.someObj.prop2 = payload;
};

export default {
  PROP1_UPDATED,
  PROP2_UPDATED,
};

getters.displays(게터s.displays)

const prop1 = state => state.someObj.prop1;
const prop2 = state => state.someObj.prop2;

export default {
  prop1,
  prop2,
};

컴포넌트 내에서 통상적인 방법으로 원하는 대로 작업을 수행할 수 있습니다.this.$store.dispatch('actionOne')...

이것은 상점을 분할하기 위한 또 다른 옵션이며 다른 모듈을 가지고 있습니다.이것은 이미 테스트되고 있습니다.

구조.

└── src
    ├── assets
    ├── components
    └── store
       └─ modules
          └─ module1
              ├── state.js
              ├── actions.js
              ├── mutations.js
              ├── getters.js
              └── index.js
         └─ module2
              ├── state.js
              ├── actions.js
              ├── mutations.js
              ├── getters.js
              └── index.js
   └─ index.js

store/index.displaces

import Vuex from "vuex";
import thisismodule1 from "./modules/module1";
import thisismodule2 from "./modules/module2";

const createStore = () => {
  return new Vuex.Store({
    modules: {
      module1: thisismodule1,
      module2: thisismodule2

    }
  });
};

export default createStore;

store/syslog/syslog1/index.syslogs

import actions from './actions';
import getters from './getters';
import mutations from './mutations';
import state from './state';


export default {
  state,
  actions,
  mutations,
  getters
}

store/syslog/syslog2/index.syslogs

import actions from './actions';
import getters from './getters';
import mutations from './mutations';
import state from './state';


export default {
  state,
  actions,
  mutations,
  getters
}

Tipp: 스토어를 main.js로 Import하는 것을 잊지 마세요.

문서: https://vuex.vuejs.org/en/modules.html

다른 모듈로 나눌 수 있습니다.이렇게 하면 관련된 모든 돌연변이, 게터, 상태 및 작업을 별도의 파일에 보관할 수 있습니다.이 설명서는, https://vuex.vuejs.org/en/modules.html 를 참조해 주세요.

@bigsee의 훌륭한 답변에 덧붙여,index.js모듈을 내보내는 파일:

└── src
    ├── assets
    ├── components
    └── store
          └─ mymodule
              ├── state.js
              ├── actions.js
              ├── mutations.js
              ├── getters.js
              └── index.js

index.displaces를 표시합니다.

import state from './state'
import * as getters from './getters'
import * as mutations from './mutations'
import * as actions from './actions'

export default {

  state,
  getters,
  mutations,
  actions
}

getters.displays(게터s.displays)

const getData = state => state.data

export {
  getData
}

동작, 돌연변이 및 상태 파일과 유사합니다.

이 구조는 동적으로 로드 스토어 모듈과 함께 사용할 수 있습니다.

src
└─ store
   └─ modules
      └─ [module-name].js
      └─ ...
   └─ index.js // <- your store main file

및 index.display에 있습니다.

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

Vue.use(Vuex)

// Load store modules dynamically.
const requireContext = require.context('./modules', false, /.*\.js$/)

const modules = requireContext.keys()
  .map(file =>
    [file.replace(/(^.\/)|(\.js$)/g, ''), requireContext(file)]
  )
  .reduce((modules, [name, module]) => {
    if (module.namespaced === undefined) {
      module.namespaced = true
    }

    return { ...modules, [name]: module }
  }, {})

export default new Vuex.Store({
  modules
})

그런 다음 모듈 [이름]을(를) 입력해 주세요.js는 modules 폴더에 있습니다.예:
auth.module:

// state
export const state = {}

// getters
export const getters = {}

// mutations
export const mutations = {}

// actions
export const actions = {}

액션/게이터에 액세스 할 수 있습니다.다음 사항을 기입해야 합니다.

export default {
  computed: {
    ...mapGetters({
      method_1: '[module-name]/method_1',
      method_2: '[module-name]/method_2',
    }),
    method_with_arg(){
      return this.$store.getters['[module-name]/method_with_arg'](this.n)
    }
  },
...

Cretu Eusebiu의 데모는 이쪽(laravel-vue-spa)에서 보실 수 있습니다.
감사합니다.

다음과 같은 구조를 가지고 있습니다.

└── store
          └─ module1
              ├── actions.js
              ├── mutations.js
              ├── getters.js
              └── index.js
   index.js 

module1에서 다음 코드 예를 복사할 수 있습니다.index.discode

    import actions from "./actions";
    import getters from "./getters";
    import mutations from "./mutations";
    
    import { state } from "./state";

    export default {
     state: () => state,
     actions,
     mutations,
     getters,
   };

상태:

export let state = {
  themes: [],
};

getters:

const themesList = (state) => {
  return state.themes;
};

액션:

const getThemesList = async ({ commit }) => {
  
  commit(types.GET_THEMES, [values]);
};

돌연변이:

const GET_THEMES = (state, themes) => {
  state.themes = themes;
};

그리고 매장에 있는 메인 인덱스에 이것을 넣으세요.

const createStore = () => {
  return new Vuex.Store({
    modules: {
      module1: module1,
    },
  });
};

export default createStore;

중첩된 더 많은 Moudle의 경우 하위 모듈로 'modules'를 내보낼 수 있습니다.

하위 모듈에서 멀티들을 노출시키는 방법은 무엇입니까?

import Vuex from 'vuex';
import Vue from 'vue';
import actions from './actions';
import getters from './getters';
import mutations from './mutations';
import moudles from './moudles';

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
    someObj: {},
  },
  actions,
  getters,
  mutations,
  moudles,
});

└── src
    ├── assets
    ├── components
    └── store
       └─ modules
          └─ module1
              ├── state.js
              ├── actions.js
              ├── mutations.js
              ├── getters.js
              └── index.js
              ├── modules
                 |____moudleA （state.js.....）
                 |____moudleB （state.js.....）         
                  
         └─ module2
              ├── state.js
              ├── actions.js
              ├── mutations.js
              ├── getters.js
              └── index.js
   └─ index.js

상세한 것에 대하여는, https://vuex.vuejs.org/guide/modules.html 를 참조해 주세요.

언급URL : https://stackoverflow.com/questions/40564071/how-do-i-break-up-my-vuex-file