springboot和vue：十三、VueX简介与安装与推荐视频+前端数据模拟MockJS
VueX简介与安装与推荐视频
- VueX用于管理分散在vue各个组件中的数据。
- 每一个VueX的核心都是一个store，当store中的状态发生变化时，与之绑定的视图也将重新渲染。
- store中的状态不允许被直接修改，只能显示提交mutation
- VueX中有五个重要的概念：State、Getter、Mutation、Action、Module。
- 安装：npm install vuex@next
- b站上讲的较好的视频有《1小时学会Vue之VueRouter&Vuex》，关于VueX的部分只占了7分钟左右的篇幅。个人认为后端看完，了解概念即可。
前端数据模拟MockJS
简介与安装
- Mock.js是前端用于拦截Ajax请求再生成随机数据响应的工具，可以用来模拟服务器相应。
- 优点：简单方便、无侵入性，基本覆盖常用接口类型
- 安装：npm install mockjs
拦截请求的方法
mock方法
Mock.mock(url?,type?,template|function(options))
?表示可选项。
url，可以是url字符串，也可以是url正则表达式。
type，表示需要拦截的请求类型，如GET、POST等。
template，表示数据模板，可以是对象或者字符串。
function，表示用于生成响应数据的函数。
延时请求
Mock.setup({timeout: 400
})
写在Mock.mock方法前，表示延时400ms请求到数据。
使用示例
首先在main.js导入：
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的数字。值可以填任意数，起到的作用只是为了告诉Mock我想生成一个整数"rank|1-100": 1,"stars|1-5": 1,"nickname": "@cname",//随机生成中文名字"img": "@image('200x100','#ffcc33','#FFF','png','Fast Mock')" //随机生成固定格式的图片// 从左到右的属性分别是宽高、背景颜色、图内文字颜色、图片类型、图内文字}
});