项目知识点

移动端适配的解决方案

1. 下载 amfe-flexible,并在 main.js 做导入

• 这步实现了根据屏幕不同，自动设置了html字体大小

2. 下载 postcss-pxtorem，并添加配置文件

• 这步实现了自动把我们写的px单位在打包运行后变成rem单位

将px单位换成rem单位

如果用px单位，就代表写死了，以后不管什么屏幕都是那么大像素，所以要用一个可变的单位： rem

rem和px单位的计算： 一个rem单位的具体值是根据一个html的字体大小来设置的 如果一个html的字体大小默认16px 那么1rem就是16px 2rem就是32px 如果设置1个字体大小为10px 那么1rem就是10px 2rem就是20px

封装使用一个接口

处理异常

try/catch来捕获异常

把await 放到 try 中进行执行，如有异常，就使用catch 进行处理

vuex

vuex

Vuex是一个专为 Vue.js 应用程序开发的状态管理模式， 采用集中式存储管理应用的所有组件的状态，解决多组件数据通信。

vuex分为五个大块

1. state: 统一定义公共数据(类似于data()return {a:1,b:2，xxxxxx}）

2. mutations:使用它来修改数据(类似于methods)

3. getters： 类似于computed(计算属性，对现有的状态进行计算得到新的数据-------派生 )

4. actions： 发起异步请求

5. modules： 模块拆分

存放数据

export default new Vuex.Store({
//统一存放公共数据，相当于data。
state: {
num:10},

使用数据

在组件中使用store：在任意组件中，通过this.$store.state获取公共数据

mutation语法

this.$store.commit('mutation名'，实参)

localstorage

在vuex中的state定义一个公共数据，在组件页面通过$store.state.num去访问这个数据

在vuex中的mutation中定义了一个修改公共数据的方法，在组件页用this.$store.commit去执行这个方法 并传入修改后的参数

我们可以使用vuex存储数据，但是这个数据一刷新就没了，所以我们还需要把数据一并存在localstorage里

当我们使用localstorage存储数据时需要进行JS对象和JSON字符串之间的一个转换

当我们点击修改按钮,后台的本地存储拿到了值,但是需要我们刷新一下页面,本地存储的值才会被渲染到页面上

vuex和本地存储的区别

vuex响应式 数据存储时间短；localstorage数据可以一直存储，但是不是响应式