无法在mounted() hook Nuxt.js 中从Vuex 商店调度方法答案

【问题标题】：Can't dispatch method from Vuex store in mounted() hook Nuxt.js无法在mounted() hook Nuxt.js 中从Vuex 商店调度方法
【发布时间】：2019-02-15 20:06:31
【问题描述】：

我在从 Vuex 商店中调度方法时遇到了问题？这是出现的错误。

我只是在挂载的钩子中这样做：this.$store.dispatch('setSeason', seasonValue);

我在官方文档中看到了如何初始化store，但是不起作用...

这是我的 Vuex 商店初始化代码：

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;

【问题讨论】：

请提供更多信息和代码，在 Vue 实例上注册您的商店的代码和 setSeason 操作。
问题已被编辑）
你真的需要手动初始化存储吗？
但是我应该如何初始化呢？

标签： vue.js nuxt.js server-side-rendering

【解决方案1】：

nuxt 中的 store 有两种模式，一种是经典的，例如您在 store/index.js 中手动创建商店

import Vuex from 'vuex'

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

export default createStore

其他是模块。您只需在 store（store/index.js、store/something.js 等）文件夹中创建包含状态、操作和突变的文件，例如

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

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

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

这两种方法都可以让你访问 this.$store 里面的挂载

【讨论】：

但这两个模型有什么区别呢？功能上的区别？还是什么？
@AndreyF 只是定义和结构的不同方式。

【解决方案2】：

在您的 Vue 实例上，您是否添加了 Vuex 商店？

它应该看起来像这样

import store from './store'

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

【讨论】：

我正在使用 Nuxt.js。有一个内置的全局 $store 对象。没必要。