vue 复习

/**
 * 深度冻结数据
 * 
 * @param {*} obj 
 */
function deepFreeze(obj) {
  Object.freeze(obj)
  for (const i in obj) {
    if (obj.hasOwnProperty(i)) {
      if (typeof obj[i] === 'object') { 
        deepFreeze(obj[i])
      }
      
    }
  }
}
const obj ={
	age:20,
	hobby:{
	one:"篮球"
	}
}
deepFreeze(obj)

vue 父子组件通信

1 props/emit

//子组件： Child.vue
this.$emit('to-parent'）
// 父组件 parent.vue
<Child ref="child" @to-parent="handleToParent" />

2 $ref

//子组件： Child.vue
<script>
setMsg(){
}
<script>

// 父组件 parent.vue
<Child ref="child" @to-parent="handleToParent" />
<script>
this.$refs.child.setMsg('msg')
<script>

3 $parent

//子组件： Child.vue
<script>
this.$refs.parent.focus()
<script>

// 父组件 parent.vue
<Child ref="child"  />
<script>
focus(){

}
<script>

4 $children

//子组件： Child.vue
<script>
setMsg(){
}
<script>

// 父组件 parent.vue
<Child ref="child"  />
<script>
this.$children[0].setMsg()
<script>

vue 组件间通信

1 provide/inject

//组件A： ComA.vue
<ComB    />
<script>
provide(){
return{
title:'msg',
comA:this //当前组件实例 ,提供给子组件B和所有A的子孙组件注入}
}
methods:{
	setMsg(){
	}
}
<script>

// 子组件 ComB.vue
<ComC ref="child"  />
<script>
inject:['title','comA']
<script>


// 孙子组件 ComC.vue
<script>
inject:['title','comA']
methods:{
handle(){
	this.comA.setMsg('hahah') 
	this.comA.addChild(this) // 调用A z中的方法
}
}
<script>

1 $attrs/$listenters

//组件： ComA.vue
// 将组件A 的所有prop 传给组件B 
<ComB v-bind="$attrs" title="aa"  >

 //组件B：
  inheritAttrs:false // 根元素禁用继承
 {{$attrs.title}}

//组件： ComA.vue
<ComB   @a="handleA" @b="handleB" >
//组件： ComB.vue
console.log(this.$listenters) //{a:f,b:f}

EventBUS

bus.$emit('init')
bus.$on('init', () => {})
bus.$off('init')

Vuex

new Vuex.Store({
  state: {
    age:10,
    name:"张三"
  }
  getters: {
	getAge(state){
		return state.age+'666'
	 }
	},
	mutations:{
		setAge(state,val){
			state.age=val
			}
		}
  })
// state 相当于vue中的data
// getter 相当于vue中的computed ，会缓存

this.$store.state.age
const states = mapState(["age",username])

computed:{
	...mapState(["age",username])
	...mapState({
        age: state => state.age,
    }),
     ...mapGetters(['getAge']),
   
}

命名空间

modules:{
	 user:{
	  namespaced: true,
	  state:{
	     age
		},
		mutations:{
			setAge(state,val){
				state.age=val
			}
		}
	 }
 }
   // 空间取值
    this.$store.getters['user/age'];
     ...mapState('user', [
        'age'
    )

mutations: 用于 改变state中的值 且为同步操作
actions 是异步操作,可以调用接口信息

// 提交 mutations
this.$store.commit('user/setAge', val)
methods: {
     ...mapMutations([
      'setAge', // 将 `this.setAge()` 映射为 `this.$store.commit('setAge')`
    ]),
    ...mapMutations("user", [
        "setAge",
    ]),
    ...mapMutations({
      add: 'setAge' // 将 `this.add()` 映射为 `this.$store.commit('setAge')`
    })
    handleSubmit (e) {
      this.add() // 提交 mutations
    }
}

actions 中 定义异步操作（ 耗时操作，LocalStorage，网络请求）
actions 中提交的都是 mutations 中定义的方法

actions: {
    async Login ({ commit }, userInfo) {
      try {
        ......
        const { tokenInfo } = resp.data
        //  commit 提交修改的是 mutations
        commit('setToken', tokenInfo.token) 
      } catch (e) {
        throw e
      }
    },
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
    
  },
  mutations: {
    setToken: (state, token) => {
      state.token = token
    },
    someMutation: (state) => {
    }
  },

action 中的辅助函数

import { mapActions } from 'vuex'
methods: {
  ...mapActions(['Login']),
 
  async handleSubmit (e) {
    await this.Login(this.form)
  }
}