Vue2各种配置

Vue2各种配置

网络请求

请求后端数据，这里用egg框架写后端，实现前后端分离npm init egg --type='simple'
登录注册组件

import axios from 'axios'

// 生命周期的mounted阶段，挂载到页面中之后
async mounted() {
  
}

配置代理 vue.config.js中配置

devServer: {
    port:8080,
    proxy: {
      '/api': {
        target: 'http://192.168.0.101:7001',
        secure:true,
        pathRewrite: {
          '^/api':'/'
        }
      }
    }
  }

混合

定义：把多个组件共用的配置提取成一个混入对象

1. 定义混合

   export let hunhe = {
       // 生命周期是一个函数
       mounted() {
           console.log('mounted')
       }
   }
   

   ​

2. 导入应用：应用的时候分为局部混合和全局混合

   import {hunhe} from hunhe.js
   

   • 全局混合在main.js入口文件中引入文件Vue.mixin()

     import {hunhe} from './hunhe'
     Vue.mixin(hunhe)
     

   • 局部混合mixins:['hunhe']

插件

功能：增强Vue

本质就是包含install方法的一个对象，install第一个实参是Vue，之后的参数可以传递数据

• 定义插件对象.install = function(Vue,options)

• 添加功能

  • 全局过滤器

    Vue.filter(...)

  • 添加全局指令

    Vue.directive(...)

  • 配置全局混合

    Vue.mixin(...)

  • 添加实例对象

    Vue.prototype.$myMethod = function() {}

• 使用插件Vue.use()

  ​

vuex

组件仓库

特点(面试)

• 能够在vuex中集中管理共享的数据，易于开发和后期维护
• 能够高效地实现组件之间的数据共享, 提高开发效率
• 存储在 vuex中的数据都是响应式的，能够实时保持数据与页面的同步
• 一般情况下，只有组件之间共享的数据，才有必要存储到vuex中;
• 对于组件中的私有数据，依旧存储在组件自身的data中即可

下载

推荐使用脚手架下载，自己手动下载的时候要注意不要弄错版本号

vue create 项目名 跟着小黑窗选中vuex敲回车

语法

• state：存储数据（响应式的数据）

  // js代码来获取仓库中的数据
  this.$store.state.obj
  

  注意：同data一样，对于存储数组类型的数据，要用push,shift等等函数来修改才能动态刷新

• getters：我们可以的把它和计算属性类型记忆，最终得到的结果是return返回的数值

  this.$store.getters.bigMans
  

• mutation

  组件中希望更改 Vuex 的 store 中的状态(数据)的唯一方法是提交 mutation
  不要用赋值表达式直接在组件中给store设置新数据
  这样设计的原因是,只有通过mutation来更新数据,它才会去帮我们通知所有使用数据的组件更新数据 刷新UI

  this.$store.commit('xiugai',{title:'修改后的title数据'})
  

• action

  进行一些异步的操作，如果要修改state中的数据

  ybcaozuo(ctx,obj) {
    console.log(ctx,11111,obj)
    setTimeout(()=> {
      ctx.commit('titlexg',obj)
    },2000)
  }
  

  传入的ctx是上下文对象，obj是传入的数据

  js调用action

  this.$store.dispatch('ybcaozuo',{title:'title修改后'})
  

• modole

  1. 引入模块

     import lf from '../store/lf.js'
     

  2. 写入modole中

      modules: {
         lf
       }
     

     ​