用vue和vuex做移动端注意事项_vuex延长

1.同源策略造成请求不成功
解决方法：vue.cli=>devServe.proxy配置本地代理

1. 根目录，新建vue.config.js文件
2. 添加ddevServer.proxy配置节点

module.exports = {
  devServer: {
    proxy: {
      '/v2': {
        target: 'http://api.douban.com'
      }
    }
  }
}
1
2
3
4
5
6
7
8
9

注意事项：仅限于开发时使用，配置之后重启服务
2. const home =（)=>import()与 import from 的区别
懒加载（按需加载)

3.rem适配 ：插件：postcss-pxtorem

npm i postcss-pxtorem -D
1

配置（postcss.config.js）
module.exports = {
  plugins: {
  'postcss-pxtorem': {
   rootValue: 37.5, // 屏宽/10 = 1rem
 propList: ['*'] //转换的样式属性 
   }
  }
}
1
2
3
4
5
6
7
8
9

lib-flexible 用于设置 rem 基准值（动态）

 修改rem基准值的js插件   需要在打包后需要使用
npm i amfe-flexible -S

入口文件main.js导入 amfe-flexible 
import 'amfe-flexible'
1
2
3
4
5

注意：行内样式不起作用

**4.配置toke**
 * auth认证（令牌）
 * 之前用户信息存储位置是：sessionStorage，关闭浏览器登录失效
 * 保持登录状态：refresh_token来延长token有效期
 * token: {token, refresh_token}

``
const TT_TOKEN = 'TT_TOKEN'

// 存储token
export function setToken (token) {
  window.localStorage.setItem(TT_TOKEN, JSON.stringify(token))
}

// 获取token
export function getToken () {
  return JSON.parse(window.localStorage.getItem(TT_TOKEN))
}

// 删除token
export function delToken () {
  window.localStorage.removeItem(TT_TOKEN)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

使用vuex管理和共享token

• 共享token数据
• 在vuex中更好操作，更好监听。