通信和nuxt

1. state、actions、view。
2. 父子组件通信：父传子props，子组件$emit（$event获取传递参数)。
   组件间通信：eventBus，$ref（在普通标签获取到是dom；在组件获取到是实例要等，实例渲染完毕才能获取）。
   其他通信：模拟vuex生成一个全局存储store.js，包含state和actions；其他组件交互的时候访问该state，然后通过actions更改。
   vuex：getter能进行缓存和返回计算值。提交action可以异步，最后通过action提交mutation改变state。
3. 为了避免老是重复$store.state，可以使用mapState；getter相当于computed，可以将state数据计算后返回。不要用mutation执行异步操作，不然不方便devtools执行时光旅行和回滚等调试。异步用action，action最后改状态还是通过mutation。

import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'
export default {
  computed: {
    // ...mapState([count])
    ...mapState({num: count}) // 支持重命名
    ...mapGetters(['reverseStr'])
  },
  methods: {
    ...mapMutations(['increase']), // this.$store.commit('increase', 1)变成this.increase(1)
    ...mapActions(['increaseSync'])
  }
}

4. 在vuex里增加module配置模块，可以分模块访问。state的访问有变化，其他访问无变化，mutation等重名的时候所有同名函数都会执行。可以使用命名空间划分。

  ...mapState('moduleA', ['stateName']) // this.$store.state.moduleA.stateName变成this.stateName访问

5. 严格模式可以检测只能通过mutation来修改state，但不要在生产模式下开启，不然会深度检查状态树来检测不合规操作，会影响性能。通过node的环境变量来控制

  strict: process.env.NODE_ENV !== 'production'

6. 全选可以绑定一个v-model="isAllChecked"，然后在computed里设置get和set，get返回every遍历是否全选的结果，set给每项checked设置true。
7. vuex的插件可以实现在特定时期做一些操作，添加以下代码，再在配置里增加plugins: [myPlugin]

  const myPlugin = store => {
    // 当 store 初始化的时候调用
    store.subscribe((mutation, state) => {
      // 每次 mutation 之后调用该回调函数
      // mutation 的格式是{type, payload}，type是命名空间
    })
  }

8. vuex基本结构：由于通过Vue.use(vuex)使用，所有插件都有install方法；而且store是个类，包含state、getters、mutations、actions。

let _Vue = null
class Store {
  constructor(options) {
    const {
      state = {},
      getters = {},
      mutations = {},
      actions = {}
    } = options
    this.state = _Vue.observable(state)
    this.getters = Object.create(null)
    Object.keys(getters).forEach(key => {
      Object.defineProperty(this.getters, key, {
        get: () => getters[key](state)
      })
    })
    this._mutations = mutations
    this._actions = actions
  }

  commit(type, payload) {
    this._mutations[type](this.state, payload)
  }

  dispatch(type, payload) {
    this._actions[type](this, payload)
  }
}

function install(vue) {
  _Vue = vue
  _Vue.mixin({
    beforeCreate() {
      if (this.$options.store) {
        _Vue.prototype.$store = this.$options.store
      }
    }
  })
}

export default {
  Store,
  install
}

9. 通过服务端渲染（同构渲染）解决单页面应用首屏渲染慢和不利于SEO的问题。服务端渲染就是将数据和html模板在服务端结合后再返回给前端。npm install art-template可以结合模板和数据。前后端耦合，服务端压力大，用户体验一般。

app.get('/', (req, res) => {
  const templateStr = fs.readFileSync('./index.html', 'utf-8')
  const data = JSON.parse(fs.readFileSync('./data.json', 'utf-8'))
  const html = artTemplate.render(templateStr, data)
  res.send(html)
})

10. 客户端渲染首屏渲染慢，不利于SEO。因为请求回来的是空白页面，要请求js脚本和数据才有内容（至少请求三次）；而服务端渲染只需要请求到html，就已经有数据了。而SEO要获取网页内容之后才能知道关键字进行分析收录，而客户端渲染还没有真正的网页内容（不会去加载js）根本无法分析。
11. 同构渲染：首屏通过服务端渲染，但同时返回了spa脚本让客户端再渲染了一遍接管后续交互。
12. npm install nuxt，命令行nuxt启动，默认访问pages/index.vue，可以加/about访问pages/about.vue。会把static作为开放目录可以直接/访问，但路径记得加上localhost，因为是在服务端默认会请求服务端路径。layouts/default.vue会作为所有页面的父模板，<nuxt></nuxt>相当于slot子页面。
13. 同构渲染只能部署在node.js服务器，需要构建两个端。而客户端可以在任意服务器。而且占用服务端CPU高需要提高负载；并且构建两个端，某些DOM之类需要考虑是否能在对应环境下使用。所以要考虑是否真的需要首屏渲染速度快？是否要SEO（SEO就需要首屏渲染）
14. 三种创建nuxt.js项目的方式：初始项目；已有的node项目可以把nuxt当作中间件；vue项目改动至少10%。cls清屏。
15. ·git branch other新建分支，git branch查看当前所在分支，git checkout other切换到other分支。git checkout -b new-branch创建并切换到分支。
16. nuxt路由：所有index.vue是默认的根页面，最后会生成vue的路由配置。其他router-link和跳转语法都和vue相同。动态路由的话要创建以下划线为开头的文件或文件夹，如/user/:id则是/user/_id.vue，在_id.vue里通过$router.params.id获取路由参数，如/:id/comment则是_id/comment.vue。嵌套路由则是t创建同级同名文件，如user.vue拥有同级user文件夹下的子嵌套文件，并在user.vue里写<nuxt-child />。根目录下增加nuxt.config.js配置文件可以自定义配置路由。
17. 在根目录新建app.html作为nuxt的根页面模板，相当于vue-cli项目的index.html，照着抄官网视图模板原代码，其中的{{APP}}是注入数据就是渲染的页面。记得改完模板重启服务才生效。layouts/default.vue会作为所有页面的父模板，<nuxt></nuxt>相当于slot子页面；可以自行在pages里的vue文件里增加layout: 'templateName'指定layouts/templateName.vue作为父模板，默认不写是layout: 'default'。
18. 根目录下static文件夹下内容可以默认通过域名/访问，如static/data.json通过localhost:3000/data.json访问。asyncData可以异步获取服务端数据，最后asyncData数据会和data数据混在一起作为当前的data数据。asyncData每次进入都会触发，区别在于第一次是服务端渲染后面是客户端渲染触发。注意asyncData只能在页面组件使用，即路由配置里的组件也就是pages文件夹下的文件，而不是在vue里导入的公共组件；而且不能在此处使用this，因为其调用时机是在服务端渲染期间客户端路由更新之前，此时组件还没初始化，可通过第一个参数获取上下文来替代this。

// nuxt里专门用于获取接口数据的钩子函数asyncData
async asyncData(context) {
  const {data} = await axios({
    url: 'http://localhost:3000/data.json', // 不写完整的话默认访问服务器下的data.json
    method: 'GET'
  })
  console.log(context.params)
  return data
},
data() {
  return {
  }
}

19. cls清屏，然后nuxt启动，https://www.jsdelivr.com所有网址提供cdn链接，国内访问速度会快。对于字体文件可以通过上述找到国内cdn，因为其会引入字体资源。其他文件直接下载。