springboot和vue2：十三、VueX（兄弟组件间传值）简介、安装、推荐视频、快速上手+前端数据模拟MockJS

本文链接：https://blog.csdn.net/zhiaidaidai/article/details/133469047

VueX简介、安装、推荐视频

VueX用于管理分散在vue各个组件中的数据。
每一个VueX的核心都是一个store，当store中的状态发生变化时，与之绑定的视图也将重新渲染。
store中的状态不允许被直接修改，只能显式提交mutation
VueX中有五个重要的概念：State、Getter、Mutation、Action、Module。
安装：npm install vuex@next
官方网站：https://vuex.vuejs.org/zh/
b站上讲的较好的视频有《1小时学会Vue之VueRouter&Vuex》，关于VueX的部分只占了7分钟左右的篇幅。个人认为后端看完，了解概念即可。还有就是B站视频《1天搞定SpringBoot+Vue全栈开发》的p13。最后就是官方文档

在这里插入图片描述
实际上就是：

Vuex快速上手

state

需要共享的数据都存储在state里面，state又存储在store里面。

const store = createStore({
	state(){
		return {
			count: 0
		}
	}
})

外界如果需要获取数据，则使用this.$store.state.属性名，即this.$store.state.count访问

mutations

如果外界想要修改该数据，需要在store里面定义对应的方法或者说动作。

const store = createStore({
	state(){
		return {
			count: 0
		}
	},
	mutations: {
		increment (state) {
			state.count++
		}
	}
})

外界在this.$store.commit(方法名)调用该方法，即this.$store.commit('increment')，便可修改数据

methods: {
	increment()	{
		this.$store.commit('increment')
		console.log(this.$store.state.count)
	}
}

getters

getters相当于一些自定义的state的相关数据，如下：

const store = createStore({
	state:	{
	// 定义一个待办事项清单，done为true表示已完成，否则为未完成
		todos: [
			{id:1, text: '待办事项1', done: true},
			{id:2, text: '待办事项2', done: false},
		]
	},
	getters: {
	// 定义一个已完成的待办事项清单，过滤了那些done为true的state中的清单数据出来
		doneTodos: (state) => {
			return state.todos.filter(todo => todo.done)
		}
	}
})

外界在this.$store.getters.方法名调用该方法，即this.$store.getters.doneTodos，便可获取到数据

之所以要独立一个getters出来，而不是把它放在mutations里面过滤返回，是因为这个getters相当于一个只读接口，而mutations中的接口一般是可写的，用户可以通过commit反向改变数据状态的。

actions

因为mutations中的方法只能做同步操作，所以vuex定义了actions用来做异步的操作。

const store = createStore({
	state(){
		return {
			count: 0
		}
	},
	mutations: {
		increment (state) {
			state.count++
		}
	},
	actions: {
		increment (context) {
			context.commit('increment')
		}
	}
})

可以看到，actions中接受的参数不再是状态state，而是上下文对象context，内容就是通过上下文对象去提交mutations从而间接的修改状态中的数据。之所以这么做是为了能在actions里面记录或者说追踪state的变化。

外界在this.$store.dispatch(方法名)调用该方法，即this.$store.dispatch('increment')，便可触发这个action从而修改state中的数据

mapGetters、mapState、mapMutations、mapActions进行映射

建议看官方文档

Module

const moduleA = {
	state: () => ({ ...}),
	mutations: { ... },
	actions: { ... },
	getters: { ... },
}
const moduleB = {
	state: () => ({ ...}),
	mutations: { ... },
	actions: { ... },
	getters: { ... },
}

const store = new Vuex.Store({
	modules: {
		a: moduleA,
		b: moduleB
	}
})

store.state.a //就是moduleA中的数据
store.state.b //就是moduleB中的数据

前端数据模拟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')" //随机生成固定格式的图片
        // 从左到右的属性分别是宽高、背景颜色、图内文字颜色、图片类型、图内文字
    }
});