vue 使用總結

時間 2019-11-08

標籤 vue 使用總結简体版

原文原文鏈接

vue 使用總結

本文配套項目地址.javascript

給 vue 全局掛載方法

全局掛載 axios

因爲在 javascript 中存在如下等式 func.prototype === new func().__proto__,且 vue 組件中的 this 爲 Vue 的實例,故可使用如下方法爲 Vue 添加方法.vue

Vue.prototype.$axios = Axios;java

在啓動入口增長 axio 後,組件中使用 axio 不須要再進行 import 操做.例如:webpack

this.$axios
    .get("product/region")
    .then(this.$resp(res => {}))
    .catch(err => console.log(err));
},

掛載一個自定義的方法

定義須要掛載的方法ios

// 請求阿里oss圖片的配置參數
func.install = function(Vue, options) {
Vue.prototype.$OSSTail = function(url) {
    if (!url) {
    return;
    }
    return url.split("?")[0] + "?x-oss-process=image/resize,w_600";
};
};

在入口文件中引入 funcgit
```
Vue.use(func);
```
而後就能夠在組件中使用this.$OSSTail()啦.github

axios 全局設置

axios 用於發送 http 請求,返回 promise.web

設置基本參數

在一個項目中請求地址一般都有些統一的配置,將這些配置提取出來能夠增長代碼的複用性.vue-router

Axios.defaults.baseURL = "/api/v1.0/";
Axios.defaults.headers.post["Content-Type"] = "application/json";
...

添加請求鉤子統一處理請求

通常先後端交互須要進行身份認證,這裏以 JWT 爲例,經過設置請求鉤子爲每一個請求添加一個 header. 而後監控每一個響應,當有 token 返回時,將 token 存入 localStorage.vuex

/* 請求攔截器 */
Axios.interceptors.request.use(
  function(config) {
    // 每次請求時會從localStorage中獲取token
    let token = Storage.localGet("token");
    if (token) {
      // 把token加入到默認請求參數中
      token = token.replace(/'|"/g, "");
      config.headers.common["Authorization"] = token;
    }
    return config;
  },
  function(error) {
    return error;
  }
);

/* 響應攔截器 */
Axios.interceptors.response.use(
  function(response) {
    if (response.data.code === -1) {
      // 刪除已經失效或過時的token（不刪除也能夠，由於登陸後覆蓋）
      Storage.localRemove("token");
      // 設置登錄後跳轉頁面
      store.commit("set_jump", router.currentRoute.name);
      // 跳轉到登陸頁
      router.replace({
        path: "/login"
      });
    } else if (response.data.token) {
      // 判斷token是否存在，若是存在說明須要更新token
      Storage.localSet("token", response.data.token);
    }
    return response;
  },
  function(error) {
    return error;
  }
);

vue-router

使用

實例化 Router 對象

export default new Router({
  routes: [
    {
      path: "/",
      name: "index",
      component: () => import("./views/Index.vue"),
      meta: { keepAlive: true }
    }
  ]
});

入口處掛載

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount("#app");

對路由進行緩存

路由中 meta 添加自定義標識,如上例, { keepAlive: true }

根據條件使用 keepalive 組件進行緩存

如下示例表示當路由 meta 中 keepAlive 項爲 true 時則進行緩存,不然正常處理.

<template>
<div id="app">
    <keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>

vuex 的使用

什麼時候使用

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。當不一樣組件中須要共享狀態,通常會用到它. 例如本例中登陸後跳轉地址.

使用

全局一個 store 對象

export default new Vuex.Store({
     state: {
         jump: "index",  // 登錄後跳轉路由
     },

     // set state
     mutations: {
         set_jump(state, page) {
             state.jump = page
         }
     },

     // Action 提交的是 mutation，而不是直接變動狀態。
     // Action 能夠包含任意異步操做。
     actions: {

     }
})

調用

// 更改狀態
this.$store.commit("set_jump", router.currentRoute.name);
// 獲取狀態
this.$store.state.jump;

對組件進行緩存

<keep-alive>
    <loading></loading>
</keep-laive>

keep-alive 是 Vue 提供的一個抽象組件，用來對組件進行緩存，從而節省性能，因爲是一個抽象組件，因此在頁面渲染完畢後不會被渲染成一個 DOM 元素.
當組件在 keep-alive 內被切換時組件的 activated、deactivated 這兩個生命週期鉤子函數會被執行.

經過組件名字定義緩存規則

<keep-alive include="bookLists,bookLists">
      <router-view></router-view>
</keep-alive>
<keep-alive exclude="indexLists">
      <router-view></router-view>
</keep-alive>

經過路由屬性定義緩存規則

見 vue-router 一節.

父子組件通信

父組件向子組件傳值

子組件定義 props:list 項,props 中全部的項目都會被轉化爲組件的屬性,能夠用 this 調用.例如:

export default {
props: ["product_type", "region_type"],
methods: {
    get_region() {
      return this.product_type;
    }
  }
}

父組件定義 props 中對應的屬性

<Product product_type="微留學" region_type="國內" />

子組件向父組件傳值

本例中導航欄是父組件,導航欄中的每一項是一個子組件.

父組件中調用子組件時傳入一個事件

<template>
  <Item
    :txt="item.txt"
    @change="getVal"  // 自定義的事件
  />
<template>

子組件觸發事件
```
this.$emit("change", params);
```

對插槽的理解

父組件調用子組件時能夠傳入一些基本類型的值,可是沒法傳入一個/一組組件做爲參數;插槽的做用就是傳入子組件一個/一組組件做爲參數.

位置插槽
命名插槽
做用域插槽

vue-cli3 設置代理

vue-cli3隱藏了webpack的配置.如需增長自定義配置項,須要在根目錄(與package.json同級)新增配置文件vue.config.js.

具體配置見全局-cli-配置.

代理配置以下

module.exports = {
  devServer: {
    proxy: {
      "/api/v1.0": {
        target: "http://glocalschool.killf.info",
        ws: true,
        changeOrigin: true
      }
    }
  }
};

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。