vue懒加载及vuex基础

路由懒加载

好处：提升首屏打开速度
原理：只有切换到对于路由的时候，路由组件的js才引入

{
  path:"/news",
  component: () => import('@/views/xxxx')
}

vuex

vuex 是 专门为vue程序设计的（vue的插件），一个集中式的 应用状态管理 工具，可以让状态 的变化 是可预测的

npm i vuex -S
src新建store目录
  store
    index.js
      import Vue from 'vue'
      import Vuex from 'vuex'

      Vue.use(Vuex)
      const store = new Vuex.Store({
   
        state: {
   
          num: 10
        },
        mutations: {
   
          addNum (state) {
   
            state.num++
          }
        }
      })
      export default store
  main.js
  import store from './store'
  new Vue({
   
    store
  })

  // 组件中使用
  Vue.use(Vuex)后
  自动在所有的组件中 通过this.$store获取创建的仓库

  this.$store.state.xxx 拿到数据
  // 组件中如何修改数据
  this.$store.commit('mutation名字)
  // 传参  只能传一个参数 可以在mutation第二个参数中接收到
  this.