无法从Mounted（）钩子Nuxt.js中的Vuex存储分派方法

Question

I have a problem with dispatching the method from the Vuex store in mounted() hood? This's an error that appeared.

I'm just doing this in mounted hook: this.$store.dispatch('setSeason', seasonValue);

I saw how to initialize store in official documentation, but it doesn't work...

This is my code for Vuex store initialization:

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)

var d = new Date();
var n = d.getMonth();
var current_season = (n == 1 || n == 2 || n == 12) ? 1 : (n == 3 || n == 4 || n == 5) ? 2 : (n == 6 || n == 7 || n == 8) ? 3 : 4;

const store = () => {
    return new Vuex.Store({
        state: {
            locales: ['en', 'ru'],
            locale: 'ru',
            seasons: [{title: 'Зима', label: 'winter'}, {title: 'Весна', label: 'spring'}, {title: 'Лето', label: 'summer'}, {title: 'Осень', label: 'autumn'}],
            season: current_season,
            categories: {},
        },
        mutations: {
            SET_LANG(state, locale) {
                if (state.locales.indexOf(locale) !== -1) {
                  state.locale = locale
                }
            },
            SET_SEASON(state, season){
                if(season >0 && season <=4){
                    state.season = season
                }
            },
            SET_CATEGORY(state, menu){
                state.categories  = Object.assign({}, menu)
            }
        },

        actions: {
            async nuxtServerInit({commit}){
                let {data} = await axios.get("http://admin.duras.aws.kz/api/v1/categories", {
                  headers: {
                    'Content-Type': 'text/plain'
                  },
                  params: {
                    type: 'tree',
                    current_id: null
                  }
                })
                commit('SET_CATEGORY', data)
            },
            setSeason({commit}, value){
                commit('SET_SEASON', value);
            }
        }
    })

}
export default store;

Answer 1

On your Vue instance, have you added the Vuex store?

It should look something like this

import store from './store'

new Vue({
  ...
  store,
  ...  
})

Answer 2

There two modes of the store in nuxt, one is classical eg you manually create store in store/index.js

import Vuex from 'vuex'

const createStore = () => {
  return new Vuex.Store({
    state: {
      counter: 0
    },
    mutations: {
      increment (state) {
        state.counter++
      }
    }
  })
}

export default createStore

Other is modules. You just create files inside store ( store/index.js, store/something.js etc) folder with state, actions and mutations eg

export const state = () => ({
  counter: 0
})

export const mutations = {
  increment (state) {
    state.counter++
  }
}

https://nuxtjs.org/guide/vuex-store/

Both of this method will allow you to access this.$store inside mounted