代码之家 › 专栏 › 技术社区 › EmmanuelBeziat

存储中的NuxtJS+Vuex数据

nuxt.js vuex vuejs2 javascript

EmmanuelBeziat · 技术社区 · 7 年前

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

但我不能让它工作。

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')
	}
}

和索引。js(可以触发nuxtServerInit()):

export const state = () => {}

export const mutations = {}

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

但我不能让它工作。医生说:

但我不知道该怎么做。如何调用在另一个模块/文件中定义的操作?

我错过了什么?如果需要,以下是 repo 和 store folder

1 回复 | 直到 7 年前

Schwesi 5 年前

几周前,我遇到了同样的问题,下面是我如何解决的:

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

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
    }
  })
}

存储/模块/身份验证。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

https://vuex.vuejs.org/en/modules.html

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

新的“模块模式”使这更容易。您可以将所有文件放在一个文件夹中,不再需要“namespaced=true”。
以下是上述文件在模块模式下的外观:

存储/索引。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)
    }
  }
}

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中模块模式的更多信息,请参阅文档:
https://nuxtjs.org/guide/vuex-store/#modules-mode