Nuxt.js неизвестный магазин

Question

Я новичок в VueJS и пытаюсь использовать магазин с NuxtJS.

Итак, я хочу заставить это (https://nuxtjs.org/guide/vuex-store/) работать.

Мой магазин. /store/index.js

import { mapActions, mapGetters } from 'vuex'

export const state = () => ({
  temperature: '1234'
})

export const mutations = {setName
  setTemperature(state, payload) {
    state.temperature = payload
  }
}

export const actions = {
  getWeatherData({ commit }) {
    console.log("set weather to 123")
    commit('setTemperature', '123')
  }
}

export const getters = {
  storeTemperature(state) {
    return state.temperature
  }
}

export const mixin = {
  computed: {
    ...mapGetters([{
      myTemperature: 'weather/storeTemperature'
    }])
  },
  methods: {
    ...mapActions({
      loadWeatherData: 'weather/getWeatherData'
    })
  }
}

export default mixin

Теперь у меня есть простой компонент для отображения температуры:

<template>
  <div class="label">
    {{ testB }}
  </div>
</template>
<style lang="scss" src="./Label.scss"></style>

<script>
import { mixin as WeatherMixin } from '../../store'

export default {
  name: 'Label',
  //mixins: [WeatherMixin],
  props: {
    content: {
      Type: String,
      default: ''
    }
  },
  computed: {
    testB () {
      return this.$store.state.store.temperature
    }
  }
}
</script>

Я пытался использовать mapGetters и использовать его как:

testB () {
  return this.myTemperature
}

, но это не сработало.

Поэтому я попытался использовать mapState через:

// store
computed: {
  ...mapState({ temperature: 'temperature' })
}

и использовать его в компоненте, например

<div class="label">
  {{ temperature }}
</div>

Но я всегда не получал значение по умолчанию 1234.

Консоль Vue не нашла магазин:

Но перейдем к документации NuxtJS:

Nuxt.js будет искать каталог хранилища, если он существует, он будет:

• Import Vuex,
• Добавить параметр хранилища в корневой экземпляр Vue.

Что мне нужно, чтобы магазин работал должным образом и как я могу получить доступ к свойствам состояния хранилища? я что-то пропустил?

Answer 1

Чтобы правильно управлять Vuex в NuxtJS, используйте модули Vuex с пространством имен, чтобы правильно организовать логику вашего состояния.

Для состояния, доступного глобально, вы можете добавить их в файл ./store/index.js, в то время как для namespaced Модули создают папку с именем вашего модуля пространства имен (желательно без пробелов.), затем в этой папке создаются файлы с именами actions.js для действий, state.js для состояний, getters.js для получателей и mutations.js для вашихмутации и экспорт по умолчанию из каждого.

Затем вы можете получить доступ к состоянию пространства имен с помощью this.$store.state.<NAMESPACED MODULE NAME>.<STATE VARIABLE>