Nuxt.js unknown store - vuejs2

Question

I'm new to VueJS and try to use the store with NuxtJS.
So, i want to get this (https://nuxtjs.org/guide/vuex-store/) to work.
My 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
Now i have a simple component to display the temperature:
<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>
I tried to use mapGetters and use it like:
testB () {
return this.myTemperature
}
but this didn't work.
So i tried to use mapState via:
// store
computed: {
...mapState({ temperature: 'temperature' })
}
and use it in the component like
<div class="label">
{{ temperature }}
</div>
But i always didn't get the default value of 1234.
The Vue Console didn't find the store:
But forward to the NuxtJS documentation:
Nuxt.js will look for the store directory, if it exists, it will:
Import Vuex,
Add the store option to the root Vue instance.
What i need to get the store working as expected and how i can access the store state properties? Did i miss something?

Answer 1

To properly manage Vuex in NuxtJS, use namespaced Vuex modules, to keep your state logic properly organized.
For a globally accessible state, you can add these to the ./store/index.js file, while for namespaced modules create a folder with a name of your namespaced module (Preferably no spaces.), then in this folder create files with names actions.js for actions, state.js for states, getters.js for getters and mutations.js for your mutations and export default from each.
You can then access the namespaced state with this.$store.state.<NAMESPACED MODULE NAME>.<STATE VARIABLE>