从0到1—Vue项目失物平台的搭建（第六天）

本博客主要用于记录开发的过程以及开发问题处理方式，不粘贴开发代码。问题的解决原理我会单独做文章。

失物平台（邑丢丢）的开发代码的码云地址是https://gitee.com/MyKyle/yidd

 1.今日完成进度 

1.完成了当日答题次数后台统计

2.今日问题以及处理

2.1 利用Nodejs实现一个简单的跨域接口

下面的代码可能需要同学们基础了解下同源协议、Nodejs后端知识。

const http = require('http')
const server = http.createServer((req, res) => {
    res.setHeader("Access-Control-Allow-Origin", "http://localhost:8080"); // 设置可访问的源
    res.end(
        JSON.stringify({count:1})
    )
})
server.listen(1334)

2.2 Vue-li 利用axios简单调用接口

axios功能很强大，有路由拦截等功能，后期我们写后端时会一步一步深入。目前只是简单利用

main.js文件

import axios from 'axios'
// 配置基本的请求信息
Vue.prototype.$http = axios // 修改axios运用方式
axios.defaults.baseURL = 'http://127.0.0.1:1334' // 做简单路径

调动语句,下面使用的是async语法糖，不熟悉的小伙伴可以使用Promise函数，主要是this.$http.get('/')
async function XXX (){
  var { data: sqlCount } = await this.$http.get('/') 
  count = sqlCount.count 
}

 注意：this环境是会变化的，如果在函数体内无法正常使用this。可以尝试利用下面的语句

法一：
函数第一层使用：
const that = this
调用 that.$http.get('/')

法二：
import axios from 'axios'
利用 axios.get('/')

2.3 利用Vuex实现回答问题次数状态全局共享

注意点Y1:异步操作封装在action，把同步操作放在mutations。

尤大大解析：

区分 actions 和 mutations 并不是为了解决竞态问题，而是为了能用 devtools 追踪状态变化。

事实上在 vuex 里面 actions 只是一个架构性的概念，并不是必须的，说到底只是一个函数，你在里面想干嘛都可以，只要最后触发 mutation 就行。异步竞态怎么处理那是用户自己的事情。vuex 真正限制你的只有 mutation 必须是同步的这一点（在 redux 里面就好像 reducer 必须同步返回下一个状态一样）。

同步的意义在于这样每一个 mutation 执行完成后都可以对应到一个新的状态（和 reducer 一样），这样 devtools 就可以打个 snapshot （快照）存下来，然后就可以随便 time-travel 了。

如果你开着 devtool 调用一个异步的 action，你可以清楚地看到它所调用的 mutation 是何时被记录下来的，并且可以立刻查看它们对应的状态。其实我有个点子一直没时间做，那就是把记录下来的 mutations 做成类似 rx-marble 那样的时间线图，对于理解应用的异步状态变化很有帮助。

2.4 封装答题前次数判断程序

下面的知识需要涉及部分Vuex的知识点，我会单独做Vuex文章介绍。

avoidToTougth.js文件

import axios from 'axios'
import store from '../store/index'
axios.defaults.baseURL = 'http://127.0.0.1:1334'

var tought = (async function avoidToTougth () {
  var count = store.getters.getResponseCount
  if (count === -1 || count <= 10) {
    var { data: sqlCount } = await axios.get('/')
    // mutations操作参考2.5
    store.commit({
      type: 'gitResponseCount',
      respontCount: sqlCount.count
    })
    count = sqlCount.count
  }
  return count
})()
var done = true
tought.then((res) => {
  if (res <= 10) {
    done = false
  }
})

export { done }

使用文件
import { done } from '../../functionJS/avoidToTougth'

if (done) return this.$toast('请不要恶意答题')
...其余流程

2.5 答题验证后对答题次数增加

注意：数据库的回答次数增加免不了需要结合接口做异步请求，异步操作应该放在 actions 中处理。

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

Vue.use(Vuex)
export default new Vuex.Store({
  strict: true, // 严格模式开启
  state: {
    responseCount: -1
  },
  getters: {
    getResponseCount (state) {
      return state.responseCount
    }
  },
  mutations: {
    increResponse (state) {
      state.responseCount++
    },
    gitResponseCount (state, payload) {
      state.responseCount = payload.respontCount
    }
  },
  actions: {
    increResponse (context) {
      setTimeout(() => {
        console.log('异步请求')
      }, 1000)
      context.commit('increResponse')  // 使用 increResponse 应该放在请求增加成功后，这里由于我们还没连接数据库所以先不做处理
    }
  },
  modules: {
  }
})

2.6 Vuex中的模块化

模块化的思想深入民心，见到个挺好的例子所以和大家分享下。让大家明白 Module 与 store 的关系 

这就好比一家公司只有老板一个人来管理一样。如果小公司倒还好，公司要是稍微大一点，那就麻烦了。这个时候，老板就会成立各大部门，并给各大部门安排一个主管，把管理的任务分派下去，然后有什么事情需要处理的话，只需要跟这几个主管沟通，由主管再把任务分配下去就行了，这就大大提高了工作效率，也减轻了老板的负担。

那么同样的道理，Module 其实就承担了部门管理员的角色，而 store 就是老板。但要明确 Module 不是老板，所以老板store有他的state信息之类的，所以模块中有一个 context.rootState 和 context.rootgetter (传说中的第四个参数) 可以用来调用老板的状态信息。

注意点： 防止模块重用：使用一个函数来声明模块状

const MyReusableModule = {
  state: () => ({
    foo: 'bar'
  }),
  // mutation, action 和 getter 等等...
}