NuxtJS + Vuex — 存储中的数据

Question

使用 NuxtJS（VueJS 框架），我试图从布局模板中的 REST API 获取一堆数据（不能使用经典的 fech()或 asyncData() 方法）。

所以我正在使用 vuex and the nuxtServerInit() 操作。这样，我应该能够在应用程序加载期间直接收集所有数据，而不管当前页面如何。

但是我无法让它工作。

这是我的 map.js 商店文件：

import axios from 'axios'

const api = 'http://rest.api.localhost/spots'
 
export const state = () => ({
 markers: null
})

export const mutations = {
 init (state) {
  axios.get(api)
   .then((res) => {
    state.markers = res.data
   })
 }
}

export const actions = {
 init ({ commit }) {
  commit('init')
 }
}

和 index.js（可以触发 nuxtServerInit()）：

export const state = () => {}

export const mutations = {}

export const actions = {
 nuxtServerInit ({ commit }) {
  // ??
  console.log('test')
 }
}

但我无法让它工作。文档说：

If you are using the Modules mode of the Vuex store, only the primary module (in store/index.js) will receive this action. You'll need to chain your module actions from there.

但是我不知道该怎么做。如何调用另一个 module/file 中定义的操作？

我尝试复制各种示例，但从未让它们起作用；这是我能想到的最好的了。

我错过了什么？如果需要，这里是 repo and the store folder

谢谢！

Answer 1

几周前我运行遇到了同样的问题，下面是我如何解决的：

========经典模式=========

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import auth from './modules/auth'
import auth from './modules/base'

Vue.use(Vuex)

export default () => {
  return new Vuex.Store({
    actions: {
      nuxtServerInit ({ commit }, { req }) {
        if (req.session.user && req.session.token) {
          commit('auth/SET_USER', req.session.user)
          commit('auth/SET_TOKEN', req.session.token)
        }
      }
    },
    modules: {
      auth,
      base
    }
  })
}

store/modules/auth.js

const state = () => ({
  user: null,
  token: null
})

const getters = {
  getToken (state) {
    return state.token
  },
  getUser (state) {
    return state.user
  }
}

const mutations = {
  SET_USER (state, user) {
    state.user = user
  },
  SET_TOKEN (state, token) {
    state.token = token
  }
}

const actions = {
  async register ({ commit }, { name, slug, email, password }) {
    try {
      const { data } = await this.$axios.post('/users', { name, slug, email, password })
      commit('SET_USER', data)
    } catch (err) {
      commit('base/SET_ERROR', err.response.data.message, { root: true })
      throw err
    }
  },
  /* ... */
}

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

请注意行 commit('base/SET_ERROR', err.response.data.message, { root: true })，它调用另一个模块（称为 base）中的突变。以及 namespaced: true 选项，这是工作所必需的。

要了解有关 vuex 模块中命名空间的更多信息，请参阅文档：https://vuex.vuejs.org/en/modules.html

========模块模式=========

新的 'modules mode' 使这更容易。您可以将所有文件放在一个文件夹中，不再需要 'namespaced = true'。
以下是上述文件在模块模式下的样子：

store/index.js

export const state = () => ({})

export const actions = {
  async nuxtServerInit ({ commit }, { req }) {
    if (req.session.user && req.session.token) {
      commit('auth/SET_USER', req.session.user)
      commit('auth/SET_TOKEN', req.session.token)
    }
  }
}

store/auth.js

const state = () => ({
  user: null,
  token: null
})

const getters = {
  getUser (state) {
    return state.user
  },
  getToken (state) {
    return state.token
  }
}

const mutations = {
  SET_USER (state, user) {
    state.user = user
  },
  SET_TOKEN (state, token) {
    state.token = token
  }
}

const actions = {
  async register ({ commit }, { name, slug, email, password }) {
    try {
      const { data } = await this.$axios.post('/users', { name, slug, email, password })
      commit('SET_USER', data)
    } catch (err) {
      commit('base/SET_ERROR', err.response.data.message, { root: true })
      throw err
    }
  }
}

export default {
  state,
  getters,
  mutations,
  actions
}

想了解更多关于nuxtjs中的modules模式，请参考文档：
https://nuxtjs.org/guide/vuex-store/#modules-mode

NuxtJS + Vuex — 存储中的数据

NuxtJS + Vuex — datas in the store

javascript

vuex

vuejs2

nuxt.js