Мутации при загрузке страницы [Nuxt] [Vuex] - PullRequest
Новая
       6

Мутации при загрузке страницы [Nuxt] [Vuex]

0 голосов
/ 11 ноября 2018

(я новичок в vue и nuxt). В настоящее время у меня есть <HeaderImage> компонент в моем layouts/default.vue, и я хотел бы, чтобы каждая страница передавала разные URL-адреса изображения этому компоненту.

Прямо сейчас я использую vuex $ store для этой цели (но мне бы очень хотелось, если бы был более простой способ передачи данных), но я пытаюсь выяснить, где в моем pages/xyz.vue я должен использовать мутация this.$store.commit('headerImg/setHeaderImage', 'someImage.jpg')

Все примеры, которые я могу найти, используют только мутации в пользовательских событиях.

Ответы [ 2 ]

0 голосов
/ 11 ноября 2018

Пока я решил создать его так: 

~/store/header.js

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

Vue.use(Vuex)

const state = () => ({
  headerImage: 'default.jpg'
})

const mutations = {
  newHeaderImage(state, newImage) {
    state.headerImage = newImage
  }
}

export default {
  namespaced: true,
  state,
  mutations
}

`` 

~/layouts/default.vue

<template>
  <div id="container">
    <Header />
    <nuxt />
  </div>
</template>

<script>
import Header from '~/components/Header'

export default {
  components: {
    Header
  }
}
</script>

`` 

~/components/Header.vue

<template>
  <header :style="{ backgroundImage: 'url(' + headerImage + ')'}" class="fixed">
    <h1>Header Text</h1>
  </header>
</template>

<script>
computed: {
  var image = this.$store.state.header.headerImage
  return require('~/assets/img/' + image)
}
</script>

`` 

~/pages/customHeader.vue

<template>
  <main>
    ...
  </main>
</template>

<script>
export default {
  head() {
    this.$store.commit('header/newHeaderImage', 'custom-header.jpg')
    return {
      title: this.title
    }
  }
}
</script>

Но что-то нехорошо в отношении включения мутации в head() Это правильно?

И следующая проблема, с которой я сталкиваюсь, заключается в том, как вернуть заголовок на default.jpg, если страница не меняет состояние (что заставляет меня думать, что это неправильный подход).

0 голосов
/ 11 ноября 2018

Вероятно, то, что вы пытаетесь сделать, не имеет особенно простого решения, и как бы я это сделал, это использовать элемент состояния хранилища, который устанавливается компонентом при его загрузке. Компонент зафиксировал бы мутацию в хранилище, которая изменяет элемент состояния. Затем макет будет использовать этот элемент состояния через геттер для установки URL-адреса изображения. Вот как я это закодирую. В состоянии хранилища у меня будет массив имен классов, назовем его headState и элемент, которому будет присвоено одно из названий классов, называемое headStateSelect: 

//store/index.js

state: {
  headState: ['blue', 'red', 'green'],
  headStateSelect : ''
}

В вашем компоненте вы можете использовать выборку или асинхронную выборку, чтобы зафиксировать мутацию, которая установит headStateSelect с одним из элементов headState. 

//yourComponent.vue

async fetch ({ store, params }) {
   await store.commit('SET_HEAD', 1) //the second parameter is to specify the array position of the 'headState' class you want
}

и магазин: 

//store/index.js

mutations: {      
    SET_HEAD (state, data) {
        state.headStateSelect = state.headState[data]
    }
}

В магазине у нас также должен быть получатель, который возвращает 'headStateSelect', чтобы наш макет мог легко его получить. 

getters: {
            head(state) {
                return state.headStateSelect
            }
        }

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

//layouts/default.vue

computed: {
    headElement() {
            return this.$store.getters.head
        }
}

и макет может использовать свойство computed для установки класса следующим образом: 

//layouts/default.vue 

<template>
  <div :class="headElement">
  </div>
</template>

Теперь div в макете будет установлен с именем класса 'red' (т.е. store.state.headState [1]), и вы можете иметь класс .red css в вашем файле макета, который стилизует его так, как вы хотите в том числе с фоновым изображением.

...