vue 使用總結

vue 使用總結

本文配套項目地址.

給 vue 全局掛載方法

全局掛載 axios

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

Vue.prototype.$axios = Axios;

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

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

掛載一個自定義的方法

1. 定義須要掛載的方法

   // 請求阿里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";
   };
   };

2. 在入口文件中引入 func

   Vue.use(func);

   而後就能夠在組件中使用this.$OSSTail()啦.

axios 全局設置

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

設置基本參數

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

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

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

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

/* 請求攔截器 */
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

使用

1. 實例化 Router 對象

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

2. 入口處掛載

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

對路由進行緩存

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

2. 根據條件使用 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 應用程序開發的狀態管理模式。當不一樣組件中須要共享狀態,通常會用到它. 例如本例中登陸後跳轉地址.

使用

1. 全局一個 store 對象

   export default new Vuex.Store({
        state: {
            jump: "index",  // 登錄後跳轉路由
        },
   
        // set state
        mutations: {
            set_jump(state, page) {
                state.jump = page
            }
        },
   
        // Action 提交的是 mutation，而不是直接變動狀態。
        // Action 能夠包含任意異步操做。
        actions: {
   
        }
   })

2. 調用

   // 更改狀態
   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 一節.

父子組件通信

父組件向子組件傳值

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

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

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

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

子組件向父組件傳值

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

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

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

2. 子組件觸發事件

   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
      }
    }
  }
};