vue学习笔记（三）之vuex

简介

1. 概念：专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应 用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方 式，且适用于任意组件间通信。
   
   
2. Github 地址: https://github.com/vuejs/vuex
3. 什么时候使用 vuex？（多个组件之间共享数据！）
   ① 多个组件依赖于同一状态
   ② 来自不同组件的行为需要变更同一状态

vuex的工作原理

搭建vuex环境

注意：vue2中，要用vuex的3版本； vue3中，要用vuex的4版本
1、安装： npm i vuex@3
2、在main.js中 引入与使用

	// 引入vuex
	import Vuex from 'vuex'
	// 使用插件
	Vue.use(Vuex)

引入vuex之后 就可以在创建vm时进行 store配置
3、创建文件：（创建vuex中最为核心的store）
官方推荐 ：src/store/index.js
其他方式：src/vuex/store.js

（1）src/store/index.js

// 该文件用于创建vuex中最为核心的store

	// 引入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:actions,
	    // mutations:mutations,
	    // state:state
	    actions,
	    mutations,
	    state
	})

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

	// 引入vue
	import Vue from 'vue'
	// 引入App
	import App from './App.vue'
	// 引入插件
	import vueResource from 'vue-resource'
	// 引入store
	// import store from './store/index'
	import store from './store'   //如果存放路径标准的话，写到store就可以。vue会自动寻找其下的index
	// 关闭生产提示
	Vue.config.productionTip = false
	// 使用插件
	Vue.use(vueResource)
	
	// 创建vm
	new Vue({
   
	    el:'#app',
	    render: h => h(App),
	    store,
	    beforeCreate(){
   
	        Vue.prototype.$bus = this //安装全局事件总线
	    }
	})

注意：
在执行时，vue会整体将代码扫描一遍，将 import语句全部放入头部。import语句都执行完后才会执行其他的代码。

使用vuex实现求和

vuex求和案例

vuex的基本使用

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

	//引入Vue核心库
	import Vue from 'vue'
	//引入Vuex
	import Vuex from 'vuex'
	//引用Vuex
	Vue.use(Vuex)
	
	const actions = {
   
	    //响应组件中加的动作
	    jia(context,value){
   
	        // console.log('actions中的jia被调用了',miniStore,value)
	        context.commit('JIA',value)
	    },
	}
	
	const mutations = {
   
	    //执行加
	    JIA(state,value){
   
	        // console.log('mutations中的JIA被调用了',state,value)
	        state.sum += value
	    }
	}
	
	//初始化数据
	const state = {
   
	   sum:0
	}
	
	//创建并暴露store
	export default new Vuex.Store({
   
	    actions,
	    mutations,
	    state,
	})

注：
（1）actions中函数能够收到的两个参数：jia(context,value)

• context：相当于一个微型的store对象，里面有dispatch、commit以及state等
• value：是 其他组件传过来的参数

（2）mutations中的函数能够收到的两个参数：JIA(state,value)

• state：数据
• value：传过来的参数

2、组件中读取vuex中的数据：$store.state.sum（在模板里写不用加this。但在vue里写必须加）

3、组件中修改vuex中的数据：$store.dispatch(‘action中的方法名’,数据) 或 $store.commit(‘mutations中的方法名’,数据)

4、备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

vuex开发者工具

vuex开发者工具和vue是合并在一起的
从原理图可知，开发者工具是和mutations进行对话

vuex的getters配置项

1、概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。

2、在store.js中追加getters配置（getters与计算属性类似，依靠返回值来决定数据）
getters可以收到 state 参数

		......
		const getters = {
   
		    bigSum(state){
   
		        return state.sum * 10
		    }
		}		
		//创建并暴露store
		export