VueX簡(jiǎn)介與安裝與推薦視頻

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

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

簡(jiǎn)介與安裝

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

攔截請(qǐng)求的方法

mock方法

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

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

延時(shí)請(qǐng)求

Mock.setup({timeout: 400
})

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

使用示例

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

import './mock'

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

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