Миграция c Vuex standart mode → Vuex module [Длинно-пост]

147
23 января 2020, 09:10

Ребят, будет длинно-пост, ибо пригорело что-то.. Буду рад если вы не пройдете мимо или скажете что я не прав и херню наворотил :)

Писал себе спокойно я проект на Nuxt, писал-писал, долго писал, когда начал писать еще только Nuxt 2.1 был, а сейчас уже последняя версия аж на 2.6.Х. Почитал про обновления, как у них теперь все хорошо стало, много багов пофиксили, все работать намного быстрее мол стало, smart prefetching добавили и т.д и т.п

И черт меня дернул взять да попробовать обновить весь проект, как оказалось, если использовать менеджер пакетов npm, а не yarn, при обновлении могут возникнуть очень много проблем и проект нужно предварительно почистить. Долго мучался, искал что да как, но в итоге смог обновится с горем пополам.. Захожу в проект и меня встречает мааааленький такой варнинг: "classic mode for store/ is deprecated in nuxt 3.0". Ну думаю, отлично, и чем это нам сейчас придется пользоваться в Vuex ? Ползу в документацию и вижу что происходит переход в пользу модульного Vuex. И вот тут я начал действительно подгорать, потому что не понятно зачем, почему, и как..

Если ранее моя структура vuex была прекрасно оформлена что-то вроде:

index.js
user.js
website.js

А каждый из них был по примеру

*before*
export default { 
  state: { ... }, 
  mutations: { ... }, 
  actions: { ... },
  getters: { ... }
}

И все было прекрасно и все было понятно, а сейчас я должен использовать почему-то синтаксис модулей который заставляет меня использовать постоянный export

*after*
export const state = () => ({ ... })
export const mutations = { ... }
export const actions = { ... }
export const getters = { ... }

Но и это как оказалось еще маленькая часть беды. Внутри Vue компонентов, я теперь должен обращаться именно к отдельному модулю из хранилища Vuex (?) Что как мне кажется полностью ломает саму концепцию Vuex (Все данные хранятся в одном месте). И при вызове

before    this.$store.commit('{имя_метода}')

я еще и должен дописать перед именем метода имя файла модуля

after    this.$store.commit('user/{имя_метода}').

И вишенкой на торте стало невозможность обратится к из одного модуля, к другому внутри самого Vuex.

Если ранее внутри я обращался просто к имени метода к примеру

before    commit('setLoading', true)

То теперь так сделать не получится если такой мутации не содержится в данном модуле. Однако если он содержится в корневом модуле Vuex к нему можно будет обратится следующим образом

after    commit('setLoading', true, {root: true})

Как обратится из не корневого модуля в другой не корневой, для меня до сих пор остается загадкой.

И вот сейчас достаточно абстрактный вопрос.. А для чего собственно делать то это было, к чему такое усложнение?

Answer 1

Во-первых, можно отключить namespaced, добавив соответствующий export в файл модуля:

export const namespaced = false;

Во-вторых, обратиться из одного модуля в другой можно добавив имя второго модуля в качестве префикса:

commit('ИМЯ_ДРУГОГО_МОДУЛЯ/ИМЯ_ДЕЙСТВИЯ', null, { root: true })

В-третьих, в namespaced модуле можно сделать действие глобальным.

В-четвёртых, вы можете проголосовать за оставление classic mode или дать обратную связь напрямую разработчикам nuxt.

READ ALSO
Воспроизведение аудио потока в плеере plyr

Воспроизведение аудио потока в плеере plyr

Столкнулся с проблемой воспроизведения потокаПереношу ссылку из отдельного блока, вставляю ее в плеер и передаю воспроизведение, но плеер...

143
JavaScript. Uncaught (in promise) undefined

JavaScript. Uncaught (in promise) undefined

На странице много ссылок, при клике на любую из них, необходимо скопировать в буфер значение hrefСделал так:

108
NSFW классификатор изображений. tensorflow. react-native

NSFW классификатор изображений. tensorflow. react-native

Есть потребность запустить nsfw классификатор на ios и android устройствахПриложение пишется на react-native

145