Как использовать хороший дизайн магазина VueX в большом SPA? - PullRequest
Новая
       41

Как использовать хороший дизайн магазина VueX в большом SPA?

0 голосов
/ 29 марта 2019

Я довольно хорошо знаю VueJS, и я знаком с использованием VueX.Я работаю над несколькими проектами VueJS, но я борюсь с настройкой своего магазина.

У меня есть несколько вопросов:

  • Как мне разделить мои модули?По ресурсам (проектам, статьям и т. Д.) Или по «странице / контейнеру» в моем веб-приложении?
  • Что должен содержать магазин (и сохранять)?Состояние пользовательского интерфейса, или данные, или и то и другое?
  • Как использовать правильные имена для своих модулей, методов получения, действий и мутаций?

Для уверенности: я делаюзнать синтаксис и использование Vue и VueX.Мой вопрос сосредоточен на структуре / архитектуре VueX и его хранилище.

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

Спасибозаранее, Боб

1 Ответ

0 голосов
/ 29 марта 2019

Я думаю, что есть много способов организовать ваш магазин приложений, но вот как я делаю большую часть времени: 

+ store
  - actions.js // global actions (like a for snackbar singleton, loader etc)
  - getters.js // global getters (like a for snackbar singleton, loader etc)
  - index.js // import all other indexes (in the subfolders)
  - mutations.js // global mutations (like a for snackbar singleton, loader etc)
  - state.js // global state (like a for snackbar singleton, loader etc)
  + common
    - actions.js // common actions (shared with all resources)
    - getters.js // common getters (shared with all resources)
    - mutations.js // common mutations (shared with all resources)
    - state.js // common state (shared with all resources)
  + subfolder1 // a resource (like an article, a user, ...)
    - index.js // imports common/* files or siblings overriding it, and exports it
    - actions.js // optional file overriding common/actions.js
    - getters.js // optional file overriding common/getters.js
    - mutations.js // optional file overriding common/mutations.js
    - state.js // optional file overriding common/state.js
  + subfolder2 // an other resource ...
  + ...

В папке common имеется база кода для «обычных» ресурсов, это помогает не дублировать ее для каждого ресурса, с которым нужно иметь дело. При необходимости вы можете переопределить его для определенного ресурса через специальный файл, который переопределяет необходимые методы.

Вот пример файла, переопределяющего метод fetchDB файла common/actionos.js для определенного ресурса: 

import { actions as baseActions } from "../common/actions"

const actions = Object.assign({}, baseActions) // we don't want to edit the base instance

// overrides the common method
actions.fetchDb = async function(context, args) {
  args.params.url = "myresource"
  await baseActions.fetchDb.call(this, context, args.params)
}

export default actions

Основным преимуществом является то, что он уменьшает дублирование кода и позволяет разделять ваши ресурсы, предоставляя вам возможность адаптировать их поведение при необходимости.

Как вы думаете, эта организация может удовлетворить ваши потребности?

...