nuxt中vuex的使用

AsyncData在组件结构中,其属于宿主layout下的子组件,不属于页面组件,无法使用页面组件中的fetch方法,官方的解释是子组件无法使用阻塞异步请求,即:子组件得到的异步数据无法用于服务端渲染,这对于程序是合理的,避免异常阻塞,简化业务模型。

如果需要这些异步数据增强站内内链SEO,我们可以巧妙地使用内置vuex中的nuxtServerInit这个API,这个API实在nuxt程序实例化之后第一次执行的方法,其内部返回一个promise,我们可以在这里完成我们站内的所有子组件异步请求,随后将数据映射至对应子组件即可。

另外的方法是在mounted 方法去调用异步数据。

注:在这个data方法里面,我们获取不到 this指针,因为data方法在组件初始化之前就已经被调用了。

摘录: https://zhuanlan.zhihu.com/p/27703851
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Nuxt.js 是一个基于 Vue.js 的通用应用框架,它提供了一些特殊的功能,比如服务器端渲染(SSR),自动生成路由配置等等。Vuex 是 Vue.js 的状态管理库,可以方便地管理组件之间的状态。 在 Nuxt.js 使用 Vuex 非常方便,只需要在 store 目录下创建一个 index.js 文件,然后在其定义 state、mutation、action、getter 等等。 下面是一个简单的例子: // store/index.js export const state = () => ({ count: 0 }) export const mutations = { increment(state) { state.count++ } } export const actions = { increment(context) { context.commit('increment') } } export const getters = { getCount(state) { return state.count } } 然后,在组件使用 Vuex 也非常简单,只需要使用 mapState、mapMutations、mapActions、mapGetters 等等工具函数,就可以方便地获取和修改状态了。 下面是一个简单的示例: // pages/index.vue <template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> </div> </template> <script> import { mapState, mapActions } from 'vuex' export default { computed: { ...mapState(['count']) }, methods: { ...mapActions(['increment']) } } </script> 这样,我们就可以在页面显示当前的计数器,并且通过点击按钮来增加计数器的值。 总之,Nuxt.jsVuex 都是非常强大的工具,它们可以帮助我们构建高性能的 Web 应用程序。如果你想要深入学习这些工具,建议你查看官方文档,或者参考一些优秀的教程和示例代码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值