페이지 로드 시 돌연변이 [Nuxt] [Vuex]

페이지 로드 시 돌연변이 [Nuxt] [Vuex]

(vue와 nuxt는 처음입니다).현재 가지고 있는<HeaderImage>내 컴포넌트layouts/default.vue각 페이지에서 다른 이미지 URL을 해당 컴포넌트에 전달하고 싶습니다.

지금은 vuex $store를 사용하고 있습니다만(데이터를 보다 간단하게 전달할 수 있는 방법이 있으면 좋겠다고 생각합니다).pages/xyz.vue돌연변이를 사용해서this.$store.commit('headerImg/setHeaderImage', 'someImage.jpg')

내가 찾을 수 있는 모든 예제는 사용자 이벤트에만 돌연변이를 사용합니다.

당신이 하려고 하는 것은 아마도 특별히 간단한 해결책은 없을 것이고, 내가 그것을 하는 방법은 로드될 때 컴포넌트에 의해 설정된 스토어 상태 요소를 사용하는 것입니다.구성 요소는 저장소에서 상태 요소를 변경하는 변환을 커밋합니다.그런 다음 레이아웃은 getter를 통해 해당 상태 요소를 사용하여 이미지 URL을 설정합니다.코드화 방법은 이렇습니다.스토어 상태에서는 클래스 이름 배열('headState')과 이러한 클래스 이름 중 하나를 할당하는 요소('headStateSelect:

//store/index.js

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

컴포넌트에서는 fetch 또는 비동기 fetch를 사용하여 "headState" 요소 중 하나를 사용하여 "headStateSelect"로 설정하는 변환을 커밋할 수 있습니다.

//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
            }
        }

마지막으로 레이아웃에서는 계산된 속성을 사용하여 getter를 얻을 수 있습니다.

//layouts/default.vue

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

레이아웃은 계산된 속성을 사용하여 다음과 같이 클래스를 설정할 수 있습니다.

//layouts/default.vue 

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

레이아웃의 div가 클래스 이름 'red'(즉 store.state)로 설정됩니다.headState [ 1 ])를 사용하면 레이아웃 파일에 .red css 클래스를 가질 수 있습니다.이 클래스는 배경 이미지를 포함하여 원하는 스타일을 지정할 수 있습니다.

지금은 이렇게 만들기로 했습니다.

~/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페이지가 상태를 바꾸지 않는 경우(이것은 모두 잘못된 접근법이라고 생각하게 합니다).

언급URL : https://stackoverflow.com/questions/53245156/mutations-on-page-load-nuxt-vuex