vuex和koa2

vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
简单的说就是data中需要共用的属性。
什么是“状态管理模式”？
让我们从一个简单的 Vue 计数应用开始：

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

这个状态自管理应用包含以下几个部分：

• state，驱动应用的数据源；
• view，以声明方式将 state 映射到视图；
• actions，响应在 view 上的用户输入导致的状态变化。

以下是一个表示“单向数据流”理念的简单示意：

但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

• 多个视图依赖于同一状态。
• 来自不同视图的行为需要变更同一状态。
  对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！

通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。

这就是 Vuex 背后的基本思想，借鉴了 Flux、Redux 和 The Elm Architecture。与其他模式不同的是，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

如果你想交互式地学习 Vuex，可以看这个 Scrimba 上的 Vuex 课程，它将录屏和代码试验场混合在了一起，你可以随时暂停并尝试。

什么情况下我应该使用 Vuex？
Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是：

Flux 架构就像眼镜：您自会知道什么时候需要它。

引入Vuex（前提是已经用Vue脚手架工具构建好项目）
利用npm包管理工具，进行安装 vuex。在控制命令行中输入下边的命令就可以了。

npm install vuex --save

新建一个store文件夹，并在文件夹下新建store.js文件，文件中引入我们的vue和vuex。

import Vue from 'vue';
import Vuex from 'vuex';

使用我们vuex，引入之后用Vue.use进行引用。

Vue.use(Vuex);

在main.js 中引入新建的vuex文件

import store from './store'

再然后 , 在实例化 Vue对象时加入 store 对象 :

new Vue({
  render: h => h(App),
  store//使用store
}).$mount('#app')

现在我们store.js文件里增加几个对象对象

const state = {
        cont:1
    }
    // 具体方法的实现
const  mutations = {
    increment(state){
        //这里的state对象是模块的局部状态
        state.cont++
    },
    decrement(state){
        state.cont--
    }
}
const actions = {
    increment({commit}){
        commit('increment')
    },
    decrement({commit}){
        commit('decrement')
    }
}

用export default 封装代码，让外部可以引用

const store = new Vuex.Store({
    state,
    mutations,
    actions
})

export default store

在App中使用store.js中的方法及数据
将vuex中的mapActions选择导入

import {mapActions} from 'vuex'

用mapActions分发方法

export default {
    name: 'App',
    components: {},
    methods:mapActions([
      'increment',
      'decrement'
    ])
  }

实现到页面中

{{$store.state.cont}}
<button style="button" @click="increment">++</button>
<button style="button" @click="decrement">--</button>

koa

一个简约、扩展性强，基于Node.js平台的web开发框架。
koa脚手架koa-generator

npm install -g koa-generator

koa项目建立

koa2 server //server 项目名称

安装依赖

npm install

启动项目

npm start server 

koa中间件

执行流程，好比水分进出洋葱一样，洋葱的每层相当于中间件，水分输入相当于请求，水分输出相当于相应。整个过程中，执行指针需要遍历两次中间件（除了最后一个中间件）。

中间件	作用
koa-bodyparser	解析post请求体
koa-router	koa 路由
koa-session	会话存储
koa-static	处理静态资源

koa-views + ejs
koa-jwt
koa-helmet
koa-compress
koa-logger
koa-convert
koa-compose
koa-http-request
koa-conditional-get
koa-csrf
koa-ejs
koa-etag
koa-favicon
koa-generic-session
koa-onerror
koa-redis
koa-resource-router
koa-rewrite
koa-rt
koa-safe-jsonp
koa-static-cache

async和await
async 表示这是一个async函数，await只能用在这个函数里面。

await 表示在这里等待promise或者等待async函数中的promise返回结果了，再继续执行。

Promise 对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和 Rejected（已失败）。Promise 对象的状态改变，只有两种可能：用 resolve 方法将 Promise 对象的状态，从「未完成」变为「成功」（即从 pending 变为 resolved）和用 reject 方法将 Promise 对象的状态，从「未完成」变为「失败」（即从 pending 变为 rejected）。