vue2 ssr node服务端渲染异步操作调取API的问题

CoXie 发布于2019-08-20 14:23 / 651人阅读

摘要：在服务端异步调用获取的数据会超出服务器渲染生命周期。解决方案用上状态管理方法类似于，不同在于提交的是，而不是直接变更状态。可以包含任意异步操作。在这种情况下，只有当所有触发函数完成后，返回的才会执行。

vue在服务端异步调用API获取的数据会超出服务器渲染生命周期。
解决方案用上vuex状态管理
Actions方法

Action 类似于 mutation，不同在于：

**Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
让我们来注册一个简单的 action：**

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit("increment")
    }
  }
})

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。当我们在之后介绍到 Modules 时，你就知道 context 对象为什么不是 store 实例本身了。

实践中，我们会经常会用到 ES2015 的参数解构来简化代码（特别是我们需要调用 commit 很多次的时候）：

actions: {
  increment ({ commit }) {
    commit("increment")
  }
}

分发 Action

Action 通过 store.dispatch 方法触发：

store.dispatch("increment")
乍一眼看上去感觉多此一举，我们直接分发 mutation 岂不更方便？实际上并非如此，还记得 mutation 必须同步执行这个限制么？Action 就不受约束！我们可以在 action 内部执行异步操作：

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit("increment")
    }, 1000)
  }
}

Actions 支持同样的载荷方式和对象方式进行分发：

// 以载荷形式分发
store.dispatch("incrementAsync", {
  amount: 10
})

// 以对象形式分发
store.dispatch({
  type: "incrementAsync",
  amount: 10
})

来看一个更加实际的购物车示例，涉及到调用异步 API 和分发多重 mutations：

actions: {
  checkout ({ commit, state }, products) {
    // 把当前购物车的物品备份起来
    const savedCartItems = [...state.cart.added]
    // 发出结账请求，然后乐观地清空购物车
    commit(types.CHECKOUT_REQUEST)
    // 购物 API 接受一个成功回调和一个失败回调
    shop.buyProducts(
      products,
      // 成功操作
      () => commit(types.CHECKOUT_SUCCESS),
      // 失败操作
      () => commit(types.CHECKOUT_FAILURE, savedCartItems)
    )
  }
}

注意我们正在进行一系列的异步操作，并且通过提交 mutation 来记录 action 产生的副作用（即状态变更）。

在组件中分发 Action

你在组件中使用 this.$store.dispatch("xxx") 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）：

import { mapActions } from "vuex"

export default {
  // ...
  methods: {
    ...mapActions([
      "increment" // 映射 this.increment() 为 this.$store.dispatch("increment")
    ]),
    ...mapActions({
      add: "increment" // 映射 this.add() 为 this.$store.dispatch("increment")
    })
  }
}

组合 Actions

Action 通常是异步的，那么如何知道 action 什么时候结束呢？更重要的是，我们如何才能组合多个 action，以处理更加复杂的异步流程？

首先，你需要明白 store.dispatch 可以处理被触发的action的回调函数返回的Promise，并且store.dispatch仍旧返回Promise：

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit("someMutation")
        resolve()
      }, 1000)
    })
  }
}

现在你可以：

store.dispatch("actionA").then(() => {
  // ...
})

在另外一个 action 中也可以：

actions: {
  // ...
  actionB ({ dispatch, commit }) {
    return dispatch("actionA").then(() => {
      commit("someOtherMutation")
    })
  }
}

最后，如果我们利用 async / await 这个 JavaScript 即将到来的新特性，我们可以像这样组合 action：

// 假设 getData() 和 getOtherData() 返回的是 Promise

actions: {
  async actionA ({ commit }) {
    commit("gotData", await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch("actionA") // 等待 actionA 完成
    commit("gotOtherData", await getOtherData())
  }
}

一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下，只有当所有触发函数完成后，返回的 Promise 才会执行。

GPU云服务器云服务器 js中的异步操作阿里云服务器搭建ssr端口问题服务端渲染 java异步问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81588.html

vue服务端渲染demo将vue-cli生成的项目转为ssr

摘要：无需使用服务器实时动态编译，而是使用预渲染方式，在构建时简单地生成针对特定路由的静态文件。与可以部署在任何静态文件服务器上的完全静态单页面应用程序不同，服务器渲染应用程序，需要处于运行环境。更多的服务器端负载。目录结构 -no-ssr-demo 未做ssr之前的项目代码用于对比 -vuecli2ssr 将vuecli生成的项目转为ssr -prerender-demo 使用prer...

whinc 2019-08-22 16:07 评论0 收藏0
无痛学会各种 2 的 Vue2+Vuex2+Webpack2 前后端同构渲染

摘要：它会检测出最大静态子树就是不需要动态性的子树并且从渲染函数中萃取出来。这样在每次重渲染的时候，它就会直接重用完全相同的同时跳过比对。需要注意的是，中的操作必须是同步的，不可以存在异步操作的情况。新增：哈哈，最近又推出了 vue 的文章，在这里放个链接~手把手教你从零写一个简单的 VUE 感谢有人看我扯技术，这篇文章主要介绍最近非常火的vue2前端框架的特点和vue2+vuex2+we...

fish 2019-08-29 11:27 评论0 收藏0
无痛学会各种 2 的 Vue2+Vuex2+Webpack2 前后端同构渲染

摘要：它会检测出最大静态子树就是不需要动态性的子树并且从渲染函数中萃取出来。这样在每次重渲染的时候，它就会直接重用完全相同的同时跳过比对。需要注意的是，中的操作必须是同步的，不可以存在异步操作的情况。新增：哈哈，最近又推出了 vue 的文章，在这里放个链接~手把手教你从零写一个简单的 VUE 感谢有人看我扯技术，这篇文章主要介绍最近非常火的vue2前端框架的特点和vue2+vuex2+we...

30e8336b8229 2019-08-22 10:40 评论0 收藏0
无痛学会各种 2 的 Vue2+Vuex2+Webpack2 前后端同构渲染

摘要：它会检测出最大静态子树就是不需要动态性的子树并且从渲染函数中萃取出来。这样在每次重渲染的时候，它就会直接重用完全相同的同时跳过比对。需要注意的是，中的操作必须是同步的，不可以存在异步操作的情况。新增：哈哈，最近又推出了 vue 的文章，在这里放个链接~手把手教你从零写一个简单的 VUE 感谢有人看我扯技术，这篇文章主要介绍最近非常火的vue2前端框架的特点和vue2+vuex2+we...

Pluser 2019-08-01 15:52 评论0 收藏0
Vue.js 服务端渲染业务入门实践

摘要：说起，其实早在出现之前，网页就是在服务端渲染的。没有涉及流式渲染组件缓存对的服务端渲染有更深一步的认识，实际在生产环境中的应用可能还需要考虑很多因素。选择的服务端渲染方案，是情理之中的选择，不是对新技术的盲目追捧，而是一切为了需要。作者：威威（沪江前端开发工程师）本文原创，转载请注明作者及出处。背景最近，产品同学一如往常笑嘻嘻的递来需求文档，纵使内心万般拒绝，身体倒是很诚实...

miya 2019-08-21 16:18 评论0 收藏0