Разбиение действий Vuex на несколько файлов - PullRequest
Новая
       6

Разбиение действий Vuex на несколько файлов

0 голосов
/ 17 января 2019

Я уже использую модули для разбиения своих хранилищ Vuex на отдельные файлы, но интересно, а можно ли как-нибудь снова разбить действия хранилищ на несколько файлов?

Некоторый контекст - у меня есть Products магазин в приложении Electron на основе Vue. В этом у меня есть различные способы загрузки продуктов из локальной базы данных, загрузки продуктов, когда их нет в локальной базе данных, и обновления продуктов в локальной базе данных. Так что я уверен, что вы можете себе представить, мои действия в этом файле магазина становятся довольно большими.

Итак, я попытался разделить их на 2 файла, initial и update, которые затем импортируются и объединяются, вот так:

inital.js: 

export default {
    // My methods
}

update.js: 

export default {
    // My methods
}

products.js (модуль магазина): 

import initialActions from './actions/intial';
import updateActions from './actions/update';

const actions = Object.assign(initialActions, updateActions);

Теперь, когда я их вызываю, state, dispatch, commit не определены. Поэтому я немного застрял и несколько неохотно сливаю их обратно в файл магазина.

Состав: 

- store
  - modules
    - products
      - products.js
      - actions
        - initial.js
        - update.js

Ответы [ 2 ]

0 голосов
/ 17 января 2019

Это означает, что вы не экспортировали их в свой магазин, не создали index.js в папке своего магазина и не экспортировали свое состояние, действуя по мере необходимости. Также всегда следуйте стандартной структуре каталогов и затем экспортируйте их.

Типичный index.js выглядит как 

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

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

А типичный стандартный каталог магазина выглядит как 

Store
├── actions.js
├── getters.js
├── index.js
├── modules
│   ├── app
│   │   ├── mutations.js
│   │   └── state.js
│   └── index.js
├── mutations.js
└── state.js

Таким образом, вы никогда не получите неопределенную ошибку. Надеюсь, что это поможет!

0 голосов
/ 17 января 2019

Попробуйте это: 

import * as initialActions from './actions/intial';
import * as updateActions from './actions/update';

const actions = Object.assign({}, initialActions.default, updateActions.default);
...