7.vue3 vuex

指令

v-model number trim lazy

v-on once stop capture self prevent

v-bind:class=“{ ‘类名':布尔表达式'}”

v-if v-show v-for 数组对象字符串数字

v-text v-html v-cloak v-once v-pre v-slot

app.directive("指令名",{ 自定义指令

})

组件

定义组件 app.compoennt("组件的名字",{

​ template :''

})

let 组件名=Vue.defineComponent({})

​ 传值 $emit props provide inject mitt

生命周期的钩子函数

beforeCreate created boforeMount mounted beforeUpdate updated beforeUnmount unmounted

watch deep immediate

computed get set

$nextTick

this.$refs.ref标识.方法

props 验证 type default required validator

路由

hash history redirect children /:pathMath(.*) query params

beforeEach afterEach beforeEnter beforeRouteEnter boforeRouteUpdate beforeRouteLeave

第三方库 axios vant

vuex

全局状态管理工作

npm i vuex -S

store 建立一个仓库 仓库里的数据每个组件都可以读写

存数据

store/index.js

import {createStore} from 'vuex'

let store = createStore({
    state:{      //state是仓库里面存放数据的对象
        n:666
    }
})

export default store;  //导出仓库对象

main.js

import store  from './store/index'
app.use(store)

取数据

<template>
  <div>app {{ n }}</div>
</template>

<script>
export default {
  computed:{
    n(){
      return this.$store.state.n   //取仓库里的数据
    }
  }
}

</script>

改数据

同步改数据

<template>
  <div>{{ n }}
    <button @click="change">+</button>
  </div>
</template>

<script>
export default {
    computed:{
        n(){
            return this.$store.state.n
        }
    },
    methods:{
        change(){
            //调用仓库里的mutations里的同步方法changeN,并传入参数6
            this.$store.commit("changeN",6)
        }
    }
}

异步改数据

 actions:{  //存储异步方法
      asyncChangeN(context,payload){ //context上下文对象 payload参数
            setTimeout(()=>{
                //异步结束后,用commit调用mutaions里的同步方法 
                context.commit("changeN",payload)
            },2000)
      }
    }
    
 this.$store.dispatch("asyncChangeN",3)

vuex中的单向数据流

getters计算属性

  getters:{ //仓库里的计算属性
        info(state){
            return state.n>700?"溢出":"正常"
        }
    },

数据持久化

 
npm i -S vuex-persistedstate  
  
import persistedState from 'vuex-persistedstate'  
  

 plugins: [persistedState()],