Vue2 第四章-Vue中的ajax,第五章-Vuex-CSDN博客

本文详细介绍了在Vue项目中解决跨域问题的两种方法，以及如何使用Vuex进行集中式状态管理，包括配置proxy、插槽的作用、Vuex的actions、mutations、state和getter的使用，以及mapState、mapGetters、mapActions和mapMutations的模块化应用。

摘要由CSDN通过智能技术生成

4.1 Vue中解决跨域问题

Vue脚手架配置代理

方法一

在vue.config.js中添加如下配置：

devServer: {
	proxy: 'http://localhost:5000'
}

说明：
1. 优点：配置简单，请求资源时直接发给前端8080即可
2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理
3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器，但如果前端存在该资源，会优先匹配前端资源

方法二

编写vue.config.js配置具体代理规则

module.exports = {
	devServer: {
		proxy: {
			'/api1': {
				target: 'http://localhost:5000',//代理目标的基础路径
				pathRewrite: {'^/api1',''}
				changeOrigin: true,
			},
			'/api2': {
				target: 'http://localhost:5001',//代理目标的基础路径
				pathRewrite: {'^/api2',''}
				changeOrigin: true,
			}
		}
	}
}
/*
changeOrigin设置为 true时，服务器收到的请求头中的host为 localhost:5000
changeOrigin设置为 false时，服务器收到的请求头中的host为 localhost:8080
changeOrigin默认为 true
*/

4.2 插槽

作用：让父组件可以向子组件指定位置插入HTML结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件
分类：默认插槽，具名插槽，作用域插槽
使用方式：

5. Vuex

概念：
在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信
何时使用？
多个组件之间需要共享数据时

搭建Vuex环境

创建文件：src/store/index.js

//引入Vue核心库
import Vue from 'vue'
//引入vuex
import Vuex from 'vuex'
//应用vuex插件
Vue.use(Vuex)
//准备actions对象 --- 响应组件中用户的动作
const actions = {}
//准备mutations对象 --- 修改state中的数据
const mutations = {}
//准备state对象 --- 保存具体的数据
const state = {}
//创建并暴露出store
export default new Vuex.store({
	actions,
	mutations,
	state
})

在main.js中创建vm时传入store配置项

import store from './store'
new Vue({
	el: '#app',
	store,
	...
})

Vuex运行原理图

基本使用：

初始化数据，配置actions，mutations，操作文件index.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex)

export default new Vuex.Store({
    actions: {
        addSumOdd(context, value) {
            // console.log(context);
            if (context.state.sum % 2){
                context.commit('ADDONE',value)
            }
        },
        addWait(context, value) {
            setTimeout(() => {
                context.commit('ADDONE',value)
            }, 500);
        }
    },
    mutations: {
        ADDONE(state,value){
            state.sum += value
        },
        SUBONE(state,value){
            state.sum -= value
        },
    },
    state: {
        sum: 0
    }
})

组件中读取 vuex的数据：this.$store.state.sum
组件中修改vuex的数据：$store.dispatch(‘action的方法名’，数据) 或者 $store.commit(‘mutations中的方法名’, 数据)
若没有ajax请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接写commit

getters的使用

概念：当state中的数据需要经过加工处理后在使用，可以使用getters加工
在 index.js 中追加 getters的配置

export default new Vuex.Store({
    ....,
    getters: {
    	functionName(state) {
    		return ....
    	}
    },
    state: {
        sum: 0
    }
})

组件中读取数据 $store.getters.functionName

四个map的使用：

mapState方法：用于帮助我们映射 state中的数据为计算属性

computed: {
	//借助mapState生成计算属性：sum、school、subject（对象写法）
	...mapState(sum: 'sum', school: 'school', subject: 'subject')
	//借助mapState生成计算属性：sum、school、subject（数组写法）
	...mapState(['sum', 'school', 'subject'])
}

mapGetters方法：用于帮助我们映射 getters中的数据为计算属性

coumputed: {
	//借助mapGetters生成计算属性：bigSum（对象写法）
	...mapGetters({bigSum: 'bigSum'})
	//借助mapGetters生成计算属性：bigSum（数组写法）
	...mapGetters(['bigSum'])
}

mapActions写法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

	methods: {
		//靠mapActions生成，incrementOdd、incrementWait（对象形式）
		...mapActions({incrementOdd: 'jiaOdd' , incrementWait: 'jiaWait'})
		//靠mapActions生成，incrementOdd、incrementWait（数组形式）
		...mapActions({['jiaOdd', 'jiaWait'])
	}

mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

methods: {
		//靠mapMutations生成，increment、decrement（对象形式）
		...mapMutations({increment: 'jia' , decrement: 'jian'})
		//靠mapMutations生成，incrementOdd、incrementWait（数组形式）
		...mapMutations({['jia', 'jian'])
	}

mapActions 和 mapMutations在使用时，如需要传递参数，在模板中绑定事件时就应该传递好参数，否则参数是事件对象（event）

模块化 + 命名空间