Question

（我是vue和nuxt的新手）。我目前在<HeaderImage>中有一个layouts/default.vue组件，并希望每个页面都将一个不同的图像URL传递给该组件。

现在，我正在为此目的使用vuex $ store（但希望有一种更简单的方法来传递数据），但是我试图弄清楚我应该在pages/xyz.vue中使用突变this.$store.commit('headerImg/setHeaderImage', 'someImage.jpg')

我可以找到的所有示例仅在用户事件上使用突变。

Answer 1

您尝试做的事情可能没有一个特别简单的解决方案，而我将如何使用存储状态元素来执行此操作，该状态由组件在加载时设置。该组件将在存储中提交更改状态元素的突变。然后，布局将通过获取器使用该状态元素来设置图像url。这是我的编码方式。在存储状态下，我将具有一个类名数组，我们将其称为“ headState”，并为该类名分配一个元素，称为“ headStateSelect：

//store/index.js

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

在组件中，您可以使用访存或异步访存来提交一个突变，该突变将使用'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
            }
        }

最后，在布局中，我们可以使用计算属性来获取吸气剂：

//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类来对其进行样式设置，包括背景图片。

Answer 2

目前，我已经决定要像这样创建它：

~/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（这使我认为这是错误的方法）。

页面加载的变异[Nuxt] [Vuex]

2 个答案: