- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个 vuejs + firebase 项目。
我有三个 vuex 存储模块,它们是back、common、front
我的商店文件夹结构是这样的:
src/store
├───back
│ └───index.js
├───common
│ └───index.js
├───front
│ └───index.js
没有 nuxtjs 我可以像这样获取用户通知
fetchUserNotifications({commit, getters}) {
let getUser = store.getters["common/getUser"];
return firebase
.database()
.ref("users/" + getUser.id)
.child("notifications")
.limitToLast(5)
.on("value", snapshot => {
commit("setUserNotifications", snapshot.val());
});
},
但是使用 nuxt js getUser
返回未定义,我认为那是因为我必须在渲染之前获取数据。我还添加了
setTimeout(() => console.log(store.state.front.user), 5000);
但每次结果都是空的。当我在 Chrome 上检查 Vuejs 开发者工具时,一切看起来都很好,而且我的数据也在那里。
我搜索了文档并找到了 nuxtServerInit()
但不知道如何使用它。
说实话,我无法理解 nuxtjs,需要帮助才能像非 nuxtjs 项目一样轻松获取数据。
最佳答案
据我了解,您的问题主要涉及如何在 NuxtJS 中设置存储模块。下面是一个简单示例,说明我如何根据您迄今为止分享的有关设置和获取用户以及处理根存储操作中的 nuxtServerInit
函数的内容来设置您的根存储模块:
// store/index.js
export const state = () => ({
user: null,
userNotifications: null
})
export const mutations = {
setUser(state, userData) {
state.user = userData
},
setUserNotifications(state, userNotifications) {
state.userNotifications = userNotifications
}
}
export const getters = {
getUser (state) {
return state.user
}
}
export const actions = {
nuxtServerInit ({ commit }) {
return httpClient.get('/url/to/get/user/data')
.then(({ data }) => {
commit('setUser', data)
})
}
}
// where you fetch notifications in a component or page
fetchUserNotifications({commit, getters}) {
let user = this.$store.getters.getUser();
return firebase
.database()
.ref('users/' + user.id)
.child('notifications')
.limitToLast(5)
.on('value', snapshot => {
commit('setUserNotifications', snapshot.val());
});
},
...
如果您有任何疑问,请参阅有关 Vuex 存储的模块模式的 NuxtJS 文档:https://nuxtjs.org/guide/vuex-store
关于javascript - Firebase 在渲染之前在 Nuxtjs 上获取,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50491744/
整个分析的新手,我发现这非常困惑 我想在我的 nuxt ssr webapp 中使用 Google Analytics 4,但我对众多选项感到不知所措 Quick issue on nuxtjs/go
图像文件是否必须保存在nuxtProject的静态文件夹中?相反,它将使用 axios 保存在后端服务器中。抱歉,我无法提供示例代码,因为我对此一无所知。计划是将保存在静态文件夹中并将前端 url 发
我认为这方面有很多问题。但是没有正确答案。如何查看生产模式错误日志的详细信息? 最佳答案 Nuxt 在 nuxt.config.js 文件中提供了一个标志来启用生产调试 { debug: true
我正在使用我在下面添加的部署脚本部署我的 NuxtJS 应用程序。我使用了本教程中的一些说明:https://www.digitalocean.com/community/tutorials/how-
大家好! 我面临着一个我找不到解决方法的大问题。 简而言之 - 我希望能够生成以前未知长度的多级路由来创建过滤器。 更多详情有一个网站site.com 它有部分:site.com/news、site.
我将我应该在我的 Nuxt 应用程序中使用的模板的所有文件(css、js、图像等。)添加到 assets/theme 文件夹中。有 assets 文件夹结构: 在 assets/theme/sass/
好吧,我从 nuxt 开始,我有以下路线: /home /dashboard /login 我想保护 /dashboard,但仅限于使用 Cookie 中的 token 登录的用户。 然后我创建了一个
调用 $auth.loginWith('google') 后,我得到 http://localhost:3000/ru/user-registration#state=D7xooLsNNxNGfbvc
我有一个网站,比如说 example.com它与子域 blog.example.com 共享布局和少量组件所以我想为此创建通用的nuxtJS项目,以便nuxtJS优化路由和所有东西,我不想为此创建2个
基本上我需要将脚本添加到我的 index.html 的头部, 所以我试过的是...... 在我的 nuxt.config.js 中 head: { script: [ {
我在 Nuxt 项目中使用 vuetify 时遇到问题,我按照文档说明您只需将 @nuxtjs/vuetify 依赖项安装到您的项目中,并在 中添加一行nuxt.config.js 文件的 >buil
我正在使用 NuxtJs auth module处理我在州内的授权。对于身份验证,我写了一个有效的 express api。 我的 nuxt.config.js 中有以下配置: axios: {
我最近使用js的moment函数来vue。 但它不起作用。 这是说那个时刻没有定义。 我在这里寻找解决方案,但其中任何一个都不适合我。 如何在 nuxt 中使用时刻? import moment f
我是 Vue 和 NuxtJs 的新手。我正在尝试使用 NuxtJs 构建网络摄像头,但遇到了一些问题 Take Photo
我正在使用 NuxtJS 的 AsyncData 方法从 API 获取视频文件,然后作为文件对象返回到页面。 像这样: async AsyncData({$axios}){ var user_
无法使用 nuxt-community 的 Firebase 模块链接从 Firebase 实时数据库读取/检索数据 here 。已经在 nuxt.config.js 文件中添加了我的 firebas
我的 NuxtJS 应用程序中有一个接受查询参数的路由。我正在尝试实现一种允许用户更改查询参数并重新加载页面的逻辑。 我试过: // this does not work because I'm al
我的 NuxtJS 应用程序中有一个接受查询参数的路由。我正在尝试实现一种允许用户更改查询参数并重新加载页面的逻辑。 我试过: // this does not work because I'm al
在服务器渲染代理工作正常。请求将发送至 custom-server.com/v1/places。但在浏览器中请求将转到 current-domain.com/api/places 为什么它在浏览器中不
当我尝试在 nuxtjs 中获取一些数据时显示此错误 Cannot read property '_normalized' of undefined 这是我在 nuxtjs 中的 axios 请求:
我是一名优秀的程序员,十分优秀!