# Vue使用过程小记(持续更新)

# 指令

  • v-bind可以绑定对象
<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>

<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>

<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 利用函数来传递数据有奇效

// 表格是否可以勾选判断条件
selectable: {
  type: Function,
  default: () => {
    return true;
  }
}
1
2
3
4
5
6
7

# vue的dispatch

  • 同级的actions可以引入dispatch
GenerateRoutes({ dispatch, commit }, data) {
  ...
}
1
2
3
  • dispatch最多就只接受两个参数,typepayload

传递第三个,为undefined

dispatch('AddRoutesIndex', {
  routes: accessedRouters,
  index: schoolRouterIndex
});
1
2
3
4

# ElementUI中el-tabs组件中el-table的宽度问题

在tabs使用table会出现滚动条遮住内容可以使用v-if控制el-tab-pane里的内容 例如v-if="activeName === 'second'"

# 通过跨域方式获取信息

项目token.html引入cross-storage (opens new window)可以跨域获取信息

// utils/auth.js

var iportal = new CrossStorageClient('token.html');
iportal.onConnect().then(() => iportal.get(accessToken)).then(token_list => {
  const tokenObj = JSON.parse(token_list); // { "access_token":"4bd53dcc-2e94-4652-9463-d4495c2509ad", "token_type":"bearer", ... }
  resolve(tokenObj);
});
1
2
3
4
5
6
7

# RefreshToken获取方案

// /config/fetch.js
...
let isRefreshing = false; // refresh_token是否刷新成功
let queueRequests = []; // refresh_token刷新并行接口集合队列
switch (status) {
  case 401:
    const { config } = error.response;
    if (!isRefreshing) {
      isRefreshing = true;
      const refreshToken = RefreshToken.getInstance(store.state.config.webIportalURL);
      return refreshToken.init().then(token => {
        if (token && token.refresh_token && token.isPastDue) {
          config.headers.Authorization = token.token_type + ' ' + token.access_token;
          config.url = config.url.substr(config.url.indexOf('api/') + 4);
          queueRequests.forEach((cb) => cb(token))
          // 重试完清空这个队列
          queueRequests = []
          return axios(config);
        } else {
          ...
        }
      }).finally(() => {
        isRefreshing = false
      });
    } else {
      return new Promise((resolve) => {
        // 将resolve放进队列,用一个函数形式来保存,等token刷新后直接执行
        queueRequests.push((token) => {
          config.headers.Authorization = token.token_type + ' ' + token.access_token;
          config.url = config.url.substr(config.url.indexOf('api/') + 4);
          resolve(axios(config));
        })
      })
    }      
    break;
  case 403:
        ...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
更新于: 12/30/2019, 3:30:13 AM