第16周收获

一、遇到的问题

1.在vuex中写state时写错格式，导致页面无法加载成功

//错误代码
state() {
    cartList: []
},
//正确代码
state: {
    cartList: []
},
//或
state() {
    return{
        cartList: []
    }
},

2.关于打印函数

created(){
    const test2=()=>{
        return 2
    }
    console.log(test2());//2
    console.log(test2);//() => {return 2;}
}

二、在一个getters中访问另一个getters中的数据

getters: {
  // getters函数的第一个参数是 state
  // getters函数必须要有返回值
  filterlist (state) {
    return state.list.filter(item => item >= 5)
  },
  // getters函数的第一个参数是 getters，通过这个可以访问另一个getters中的数据
  filterlist1(state, getters) {
    return getters.filterlist.filter(item=>item>=8)
  }
}

三、v-bind控制class属性

<div v-if="true" class="goPay" :class='{disabled:selCount==0}'>结算({{selCount}})</div>

四、其他

1.const定义的对象t中保存的是指向对象t的指针，这里的“不变”指的是指向对象的指针不变，而修改对象中的属性并不会让指向对象的指针发生变化，所以用const定义对象，对象的属性是可以改变的。 

2.在actions中使用getters中的数据，以及在actions中调用其他actions

actions:{
    fun1(context){},
    fun2(context, obj) {
        context.getters.name
        context.dispatch('fun1')
    }
}

3.query、body、header

  params、data

* path: `http://localhost:8080/res/${str}`

 * query:  `http://localhost:8080/res?str=${str}`

4.箭头函数返回值为对象

const obj={a:1,b:2}
const fn1=()=>({...obj})
const fn2=()=>{return {...obj}}
console.log(fn1());// {a:1,b:2}
console.log(fn2());// {a:1,b:2}

4.get请求带query参数

query->params

request.get('/goods/detail', {
    params: {
        goodsId
    }
})

5.post请求带body参数

示例1：

request.post('/captcha/sendSmsCaptcha', {
    form: {
        captchaCode,
        captchaKey,
        mobile
    }
})

示例2：

return request.post('/cart/clear', {
    cartIds//这是一个数组
})

 示例3：

request.post('/cart/update', obj)

6.$route和$router

$ router是用来操作路由的，$ route是用来获取路由信息的。

示例：

则this.$route为下：

7.关于pnpm

 五.mixins——在多个组件中使用某个数据或函数

1.引入场景

在商品详情页面，可以立即购物商品，也可以加入购物车，两个功能对应的函数都要先判断用户是否登录，如果分别写，代码会重复，因此可以将这一部分封装成一个函数。

另外，这部分函数可能不仅在这个组件里使用，这时候就用到了mixins，就可以在许多组件里导入并使用了

if (!this.$store.state.user.userInfo.token) {
  this.$dialog
    .confirm({
      title: "温馨提示",
      message: "此操作需要先登录",
      confirmButtonText: "去登录",
      cancelButtonText: "再逛逛",
    })
    .then(() => {
      this.$router.replace({
        path: "/login",
        query: {
          backUrl: this.$route.fullPath,
        },
      });
    })
    .catch(() => {});
  return;
}

因此在src下新建文件夹mixins

该文件夹下编写的就是 Vue组件实例的 配置项，通过一定语法，可以直接混入到组件内部

data methods computed 生命周期函数

注意点: 如果此处 和 组件内提供了同名的 data 或 methods， 则组件内优先级更高

2.用法展示：

（1）在mixins文件夹中新建一个文件loginConfirm.js，在里面导出

export default {
    data() {
        return{}
    },
    methods: {
        isLogin() {}
    }
}

（2）在需要使用的组件中导入并添加在mixins中

import loginConfirm from '@/mixins/loginConfirm'
export default {
  mixins:[loginConfirm]
}

六、vuex跨模块使用actions、mutations

添加{ root: true }

示例：

actions: {
    logout(context) {
        context.commit('cart/setCartList', [], { root: true })
    }
}

七、打包发布

1.打包的作用

（1）将多个文件压缩合并成一个文件

（2）语法降级

（3）less sass ts 语法解析

2.命令：yarn build

会在项目根目录下生成dist文件夹

另外，需要在vue.config.js中配置publicPath:'./'（默认值是'/'）

3.路由懒加载

在router/index.js中，对于与首页相关的路由，因为要频繁访问，所以直接导入。而对于其他路由，异步按需导入，即：

原代码

// 与首页相关的，不按需导入
import layout from '@/views/layout'
import home from '@/views/layout/home.vue'
import sort from '@/views/layout/sort.vue'
import cart from '@/views/layout/cart.vue'
import user from '@/views/layout/user.vue'

// 不是首页相关的
import login from '@/views/login'
import myorder from '@/views/myorder'
import pay from '@/views/pay'
import prodetail from '@/views/prodetail'
import searchlist from '@/views/searchlist'
import search from '@/views/search'
import notfound from '@/views/notfound'
import test from '@/views/test'

现代码

// 与首页相关的，不按需导入
import layout from '@/views/layout'
import home from '@/views/layout/home.vue'
import sort from '@/views/layout/sort.vue'
import cart from '@/views/layout/cart.vue'
import user from '@/views/layout/user.vue'

// 不是首页相关的，按需导入
const login = () => import('@/views/login')
const myorder = () => import('@/views/myorder')
const pay = () => import('@/views/pay')
const prodetail = () => import('@/views/prodetail')
const searchlist = () => import('@/views/searchlist')
const search = () => import('@/views/search')
const notfound = () => import('@/views/notfound')
const test = () => import('@/views/test')