移动项目总结

移动项目总结

必会部分

vue相关

1. vuex基础使用

状态管理工具 和vue框架绑定在一起的

三个特性：

1. 独立于组件单独存在
2. 数据天然是响应式的
3. 架构合理 操作简单

使用场景：

多个组件共享同一份数据 （用户信息） 注意组件自己内部的数据还是照常自己维护

{
   
    state:{
   
        tokenInfo:{
   }
    },
    mutations:{
   
        setToken(state, obj){
   
            state.tokenInfo = obj
        }
    }
}

// 组件中如何使用state
// 1.直接通过$store
{
   {
   $store.state.tokenInfo}}
this.$store.state.tokenInfo

// 2.映射的方式使用 (清晰的看到当前组件一共依赖了哪些state)
import {
    mapState } from 'vuex'
computed:{
   
    ...mapState(['tokenInfo'])
}

// 组件中如何提交mutation

// 1.直接通过$store
this.$store.commit('setToken','这是一个token')

// 2.映射使用
import {
    mapMutations } from 'vuex'

methods:{
   
    ...mapMutations(['setToken']),
    changeToken(){
   
        this.setToken('这是一个token')
    }
}
// 修改state中的数据唯一的方式就是提交一个mutation (之所以要这样设计是为了生成每次修改的记录,方便调试)

2. props接值规范

{
   
  props:{
   
    name:{
   
      type: Object,
      required:true
    }
  }
}

3. router跳转和传参

// 1. path + query
// 跳转传值
this.$router.push({
   
    path:'/login',
    query:{
   
       name:'cp'
    }
})
// 路径显示
/#/login?name=cp
// 目标路由接值
this.$route.query.name

// 2. name + params

// 路由表中增加配置
{
   
    name:'login'
    path:'/login/:name',
    components:Login
}

// 跳转传值
this.$router.push({
   
    name:'login',
    params:{
   
        name:'cp'
    }
})

// 路径表现
/#/login/cp

// 目标路由组件接值
this.$route.params.name

// 拓展方法
this.$router.replace() // 跳转并删掉当前路由记录

4. 过滤器问题

vue3.0开始过滤器语法不再被支持
使用methods中的方法或者计算属性来替代
1. methods中的方法更加通用
2. 计算属性不能在v-for中使用

<ul>
    <li v-for="item in list">
        {
  {formatName(item.name)}}
    </li>
</ul>

<script>
  export default {
    
      data(){
    
          return {
    
              list:['vue','react']
          }
      },
      methods:{
    
          formatName(val){
    
              return val + 'cp'
          }
      }
  }
</script>

5. eventBus问题

// vue3.0 不再支持$on

Vue.prototype.$bus = new Vue(