（我是 vue 和 nuxt 的新手）。
我目前在我的layouts/default.vue 中有一个<HeaderImage> 组件，并且希望每个页面都向该组件传递不同的图像 url。
现在我正在使用 vuex $store 来实现这个目的（但如果有更简单的方法来传递数据，我会很高兴），但我试图找出我的 pages/xyz.vue 应该在哪里使用突变this.$store.commit('headerImg/setHeaderImage', 'someImage.jpg')
我能找到的所有示例都只对用户事件使用了突变。
【问题讨论】：
现在我决定像这样创建它：
~/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（这让我认为这是完全错误的方法）。
【讨论】：
您尝试做的可能没有特别简单的解决方案，而我将如何做到这一点是使用组件在加载时设置的存储状态元素。该组件将在存储中提交一个更改状态元素的突变。然后布局将通过 getter 使用该状态元素来设置图像 url。这是我如何编码的。在存储状态中，我有一个类名数组，我们称之为“headState”，以及一个将被分配其中一个类名的元素，称为“headStateSelect：
//store/index.js
state: {
headState: ['blue', 'red', 'green'],
headStateSelect : ''
}
在您的组件中，您可以使用 fetch 或 async 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”的getter，以便我们的布局可以轻松获取它。
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 类来设置您想要的样式，包括背景图片。
【讨论】：