页面加载上的突变[Nuxt][Vuex]

（我是vue和nuxt的新手）。 我目前在我的

布局/default.vue中有一个
组件，希望每个页面都向该组件传递一个不同的图像url

现在我正在使用vuex$store来实现这个目的（但是如果有更简单的方法来传递数据，我会很高兴），但是我正在试图找出我的
页面/xyz.vue
中应该在哪里使用变异
this.store.commit（'headerImg/setHeaderImage'，'someImage.jpg'）

我能找到的所有示例都只在用户事件上使用突变。
您试图做的可能没有一个特别简单的解决方案，我将如何做是使用组件加载时设置的存储状态元素。组件将在存储中提交一个改变状态元素的突变。然后，布局将通过getter使用该state元素来设置图像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]
    }
}

在商店里，我们还应该有一个getter返回'headStateSelect'，这样我们的布局就可以很容易地得到它

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

最后，在布局中，我们可以使用computed属性获取getter：

//layouts/default.vue

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

布局可以使用computed属性设置一个类，如下所示：

//layouts/default.vue 

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

//layouts/default.vue

布局中的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
从“~/components/Header”导入标题
导出默认值{
组成部分：{
标题
}
}

``

~/components/Header.vue
标题文本
计算：{
var image=this.$store.state.header.headerImage
返回要求（'~/assets/img/'+image）
}

``

~/pages/customHeader.vue
...
导出默认值{
总目（）{
此.$store.commit（'header/newHeaderImage'，'customheader.jpg'））
返回{
标题：this.title
}
}
}

但是在
head（）
中加入突变会让人感觉不舒服，对吗

我面临的下一个问题是，如果页面不改变状态（这让我认为这是完全错误的方法），如何将标题返回到
default.jpg
。
这很有帮助，但我想我还不清楚我的目标。我已经发布了一个答案，可能会澄清我的问题。
~/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>