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

掛載一個自定義的方法

  1. 定義須要掛載的方法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";
    };
    };
  2. 在入口文件中引入 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

使用

  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 內被切換時組件的 activateddeactivated 這兩個生命週期鉤子函數會被執行.

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

<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
      }
    }
  }
};
相關文章
相關標籤/搜索