Vue2进阶——Vuex

一、Vuex

1、概念

• 作用：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信方式，且适用于任意组件间通信。
• 官网
• 使用场景
  多个组件依赖同一状态。来自不同组件的行为需要变更同一状态。

2、环境搭建

• 下载

npm i vuex

• 引入

import Vuex from 'vuex'

• 使用
  新建store文件夹，里面新建index.js，该文件用于创建Vuex中最核心的store，然后再引入

import store from './store'
new Vue({
	store,
})

此时store就引用成功了。vc和vm上都有$store属性里，里面的函数都可以引用

二、原理

1、核心部分

核心代码都在store下的index.js中

• 三大核心 ：actions,mutations和state
• 其他核心：getters

//引入Vue,Vuex
import Vue from 'vue'
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
//准备actions——用于相应组件中的动作
const actions={
	jia(context,value){   
		//context存放一些需要用的信息，比如actions需要调用commit,需要用到state中的data
		//value是传递的参数
		//一般commit的函数用大写，为了和actions中区分开
		context.commit('JIA',value)
	}
	jiaodd(context,value){  
		//一些判断处理的代码都在actions中去做，mutations中只需要执行简单操作，不判断。
		if(context.state.sum%2){
			context.commit('JIA',value)
		}
	}
}
//准备mutations——用于操作数据(state)
const mutations={
	JIA(state,value){
		//state用来存放需要的数据
		//value是传递的参数
		state.sum+=value
	}
}
//准备stata——用于存储数据
const state={
	sum:0
}

//准备getters，用于将state中的数据进行加工
const getters = {
	bigSum(state){
		return state.sum*10
	}
}


//创建并暴露store
export default new Vuex.Store({
	actions,  //actions:actions 对象和保存的值重名触发简写形式
	mutations,
	state,
	getters
})

2、调用

在需要的组件中调用vuex

export default{
	data(){
		return{
			n:1
		}
	},
	methods:{
		call1(){
			this.$store.dispatch('jia',this.n)
		},
		call2(){
			//若actions和mutations操作一样，可以不需要actions，直接调用mutations中
			//一般若网络中没有请求或其他业务逻辑，组件中就可以越过actions，不写dispatch，直接编写commit
			this.$store.commit('JIA',this.n)
		}
	}
	
}

三、其他

1、mapState/mapGetters

import {mapState,mapGetters} from 'vuex'
export default{
	computed:{
		//借助mapState生成计算属性，从state中读取数据。（对象写法）
		...mapState({sum:'sum',school:'school',subject:'subject'}),
		//借助mapState生成计算属性，从state中读取数据。（数组写法）
		//生成名字和state中名字需要一直
		...mapState(['sum','school','subject'])
		//getters也是类似两种写法，帮助映射getters中的数据为计算属性
		...mapGetters(['bigSum'])
	}
}

2、mapActions/mapMutations

import {mapMutations,mapActions} from 'vuex'
export default{
	methods:{
		//借助MapMutations生成对应的方法，方法中会调用commit去联系
		//之前参数是通过this.$store.commit(JIA",this.n)中的n传参，但是现在没有
		//需要在每次调用的时候利用call(n)来传参
		//同样有对象写法和数组写法
		...mapMutations({call:'JIA'})  
		
		//原理和mapActions一样，用于帮助生成与actions对话的方法
		...mapActions({call:'jia'})
	}
}

四、vuex模块化

将vuex中不同的功能模块封装起来，以后不同options可以写成不同options.js文件，然后在index.js主文件中引用，实现模块化。

const options1={
	namespaced:true, 
	actions:{},
	mutations:{},
	state:{},
	getters:{},
}
const options2={
	namespaced:true, 
	actions:{},
	mutations:{},
	state:{},
	getters:{},
}
export default new Vuex.Store({
	modules:{
		options1,
		options2
	}
})
//两个模块存放在state中，后续拿可以用mapState(['options1','options2'])，拿到，但是后续使用数据需要options1.xxx,options2.xxx。
//为了简便，可以使用如下函数，但是前提是namespaced设置为true 
mapState(options1,['sum','school','subject'])
//普通写法也能用
//也可以用this.$store.state.options1.xxx去拿到
this.$store.commit('options1/JIA',this.n)
//state和getters写法不一样
this.$store.getters[options1/xxx]