VueX簡介與安裝與推薦視頻

• VueX用于管理分散在vue各個組件中的數(shù)據(jù)。
• 每一個VueX的核心都是一個store，當(dāng)store中的狀態(tài)發(fā)生變化時，與之綁定的視圖也將重新渲染。
• store中的狀態(tài)不允許被直接修改，只能顯示提交mutation
• VueX中有五個重要的概念：State、Getter、Mutation、Action、Module。
• 安裝：npm install vuex@next
• b站上講的較好的視頻有《1小時學(xué)會Vue之VueRouter&Vuex》，關(guān)于VueX的部分只占了7分鐘左右的篇幅。個人認(rèn)為后端看完，了解概念即可。

前端數(shù)據(jù)模擬MockJS

簡介與安裝

• Mock.js是前端用于攔截Ajax請求再生成隨機數(shù)據(jù)響應(yīng)的工具，可以用來模擬服務(wù)器相應(yīng)。
• 優(yōu)點：簡單方便、無侵入性，基本覆蓋常用接口類型
• 安裝：npm install mockjs

攔截請求的方法

mock方法

Mock.mock(url?,type?,template|function(options))

?表示可選項。
url，可以是url字符串，也可以是url正則表達(dá)式。
type，表示需要攔截的請求類型，如GET、POST等。
template，表示數(shù)據(jù)模板，可以是對象或者字符串。
function，表示用于生成響應(yīng)數(shù)據(jù)的函數(shù)。

延時請求

Mock.setup({timeout: 400
})

寫在Mock.mock方法前，表示延時400ms請求到數(shù)據(jù)。

使用示例

首先在main.js導(dǎo)入：

import './mock'

在src下新建路徑mock，后新建index.js

import Mock from 'mockjs'Mock.mock('/product/search', {"ret": 0, // 鍵值對"data":{"mtime": "@datetime", //隨機生成日期時間"score|1-800": 1,//隨機生成1-800的數(shù)字。值可以填任意數(shù)，起到的作用只是為了告訴Mock我想生成一個整數(shù)"rank|1-100": 1,"stars|1-5": 1,"nickname": "@cname",//隨機生成中文名字"img": "@image('200x100','#ffcc33','#FFF','png','Fast Mock')" //隨機生成固定格式的圖片// 從左到右的屬性分別是寬高、背景顏色、圖內(nèi)文字顏色、圖片類型、圖內(nèi)文字}
});