создал хук для vuex / nuxtClientInit? - PullRequest
Новая
       13

создал хук для vuex / nuxtClientInit?

1 голос
/ 01 апреля 2019

Мне было интересно, как лучше всего сделать что-то вроде nuxtClientInit.Я пытаюсь загрузить Auth State как можно раньше на клиенте и сохранить его в моем хранилище vuex, но не на стороне сервера.Было бы замечательно, если бы у vuex было что-то вроде created хука для компонентов, но, насколько мне известно, этого не существует.

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

1 Ответ

3 голосов
/ 02 апреля 2019

Я понимаю, что команда nuxt работает над функцией nuxtClientInit, но перед тем, как выпустить ее, вы можете просто создать свою собственную.Чтобы понять рабочий процесс, который выполняет nuxt при получении запроса, вы можете посмотреть жизненный цикл здесь .Это показывает, что сначала вызывается nuxtServerInit, а затем промежуточное программное обеспечение.Во время этого вызова промежуточного программного обеспечения обслуживается nuxt.config.js, который содержит вашу пользовательскую конфигурацию.Частично это «плагины», которые, как говорят в документах,

Эта опция позволяет вам определять плагины JavaScript, которые должны быть запущены перед созданием корневого приложения Vue.js.

Таким образом, если вы напишите плагин для вызова действия магазина, вы сможете получить и установить локальное хранилище оттуда.Итак, начните с плагина nuxt-client-init: 

//nuxt-client-init.client.js
export default async context => {
  await context.store.dispatch('nuxtClientInit', context)
}

, затем добавьте плагин в nuxt.config.js: 

//nuxt.config.js
  plugins: [
    '~/plugins/nuxt-client-init.client.js'
  ],

Если вы заметили здесь соглашение об именах,Часть плагина .client.js сообщает nuxt, что это плагин только для клиента и является сокращением для '{ src: '~/plugins/nuxt-client-init.js', mode: 'client' }', так как nuxt 2.4 является способом определения старого '{ src: '~/plugins/nuxt-client-init.js', ssr: false }'.В любом случае, теперь у вас есть вызов в ваш магазин, так что вы можете выполнить действие для вызова из локального хранилища и установить элемент состояния. 

//store/index.js
export const actions = {
  nuxtClientInit({ commit }, { req }) {
    const autho = localStorage.getItem('auth._token.local') //or whatever yours is called
    commit('SET_AUTHO', autho)
    console.log('From nuxtClientInit - '+autho)
  }
}

Возможно, вам придется перезапустить приложение, чтобы все это вступило в силу, ноЗатем вы получаете и используете свое Auth State без всякого неприятного бизнеса nuxtServerInit.

...