20240114收获

代码细节

vuex的使用中，如果涉及到异步操作的，也就是actions的，例子如将token放置到store中，这种需要把思路理清，直接将api在对应的store模块中引入，然后对actions和mutations还有state进行操作。这是一种很保险，经验证过的思维，以后再遇到类似的actions功能的，脑子就该直接模拟出该怎么写这一段代码。

vuex的store.commit这些写法还是得记忆，之所以要记忆，是因为要在actions里面去调用mutations。不过如果在某些js文件里面需要用到actions的话，就得用dispatch了，之前记录的还是有问题，两种调用的方式都要记忆。

而且vuex的模块文件在其他地方不能直接调用的，比如user模块，当我们想在axios请求中使用其state的token时，我们只能通过import store文件，再去通过store.state.user.token这样来调用。
 

使用js-cookie包来代替原生的cookie的写法，原生的是通过document.cookie然后去操作，通过js-cookie包，写法像localStorage一样。

npm i js-cookie

存储的时候因为要给token起一个用来存储的键名，这个键名可以写在这个文件里，或者单独作为一个常量保存在常量文件夹中，后者相当于在任何地方需要用，只需要import这个文件就可以了，当然常量文件要记得export自己声明的常量。

vuex持久化，思路就是vuex中的数据刷新后会丢失，所以需要理清思路的地方在于：1.把数据存到一个刷新不丢失的地方，2.在state的那个数据还要修改，原本是:'',要改成: 从不丢失地方获取值 || ''。也就是说有隐藏的第二步，就是如何在vuex中保存这个值。

import { loginAPI } from "@/api/user";
import { getToken,setToken } from '@/utils/auth'

export default {
  namespaced:true,
  state: {
    token:getToken() || '',
  },
  mutations: {
    setToken(state,token){
      state.token = token;
      //此处虽然都是setToken,但是下面的setToken是import来的，而非mutations的递归调用，原因是因为
      //mutations里的方法，只有store.commit(方法名)的调用方式，没有 方法名()这样的调用方式。
      setToken(token)
    }
  },

这个注释地方的细节，老师如果不讲，我都没发现。

在代码中，如果在别处调用了actions，那么继续写代码的话会出问题，原因在于actions是异步的，且如果其中用了promise，那么加了async和await之后，只能使得actions的这个函数内是同步的，整个this.$store.dispatch('user/loginToken',this.loginForm)这行代码仍然是异步的，且会返回一个promise对象。这里需要理解的是，不要看代码怎么写的，要去思考代码是怎么执行的，这里这个代码看不出会返回promise对象，只能通过思考这个代码执行的过程->调用actions对应的函数，

代码错误

当store中有模块的时候，该模块需要加上属性namespaced:true

面试可能会问的

cookie和ls的区别

cookie 4kb ,ls 5M

ls只能前端操作，cookie可前可后

cookie自动携带

感悟和决心

我发现我以前之所以前端进步慢的原因在于，我的思考和理解方式和大部分人不一样，网上流传的各种各样的知识不符合我的理解，思考，记忆。包括现在也是，就像promise,async,await，我不理解为什么那么多人能把这个东西讲的那么复杂。我自己用起来实际的感受是，从axios开始，axios会操作会返回promise对象，然后我们将这个axios的实例放到api里面使用，这里有个要注意的点，我之前一直忽略，

import request from '@/utils/request'

// 登录函数
/**
 * @description: 登录函数
 * @param {*} data { mobile,password}
 * @return {*} promise
 */
export function loginAPI(data) {
  return request({
    url: '/park/login',
    method: 'POST',
    data
  })
}

这里需要return这个promise，一定要记住，要return，这样，loginAPI就相当于一个壳子，在调用他的时候就相当于拿到一个promise对象，这里因为没有需要别的操作，所以这里不需要写 async和await。然后就是用到这个api的场景

  actions: {
    async loginAction(store,data){
      const res = await loginAPI(data)
      store.commit('setToken',res.data.token)
    }
  }

在vuex中使用这个api，因为上面的代码里面是return 一个promise对象，所以这里调用的时候相当于获得了这个promise对象，这里这个接口请求是异步操作，所以为了后续代码的正确执行，得用async包裹外层函数，在异步的代码前面加上await来控制代码不要立即往下执行。然后细节来了，因为这个loginAction用了async，所以，即使他没有return promise对象，这个函数执行后依然会变成一个promise对象。

console.log(this.loginAction(this.loginForm))

所以说，如果我想在this.loginAction(this.loginForm)后面继续按需执行代码，我得在这个东西前面加上await，在外层包裹函数加上async。

      this.$refs.form.validate(async (flag) => {
        if (!flag) return;
        await this.loginAction(this.loginForm);
        console.log(11)
        console.log(this.loginAction)
        console.log(this.loginAction(this.loginForm))
      });

第三行的await和第一行的async就是这样产生的，简单粗暴。

也就是可以理解为async会污染当前这个函数，使得其变成一个promise，因此只要某层的用了async，调用这一层的函数如果内部还有按需代码，这个函数也得变成async的样子。同时，我查了一下es2022的改动，主要就是await可以加在import某个模块前面，相当于放宽了await的限制，同时这种写法不需要再包裹在async里面，其目的其实也就是希望控制代码按需执行。

下图搬运自：

ES 2022 正式发布！有哪些新特性？

反正我始终搞不明白为什么那些人能把一些功能讲的那么复杂冗长，一个人的记忆力是有限的，为啥不尽可能的把东西变得简单呢？反正我受不了他们的做法，我会固执按照我的想法，从实用性，作者设计的目的，如何记忆，等方向下手，把知识变成我喜欢的样子。