Vue2_14

Vue2_14

1、vuex

1.概念

集中式管理状态（数据）的一个 Vue插件，把大家都用到的 数据和方法 放在一个统一的位置

官方图片：

中间四个的作用：

• Actions（对象）：前后端交互，和动作
• Mutations（对象）：加工
• State（对象）：存储数据的地方
• Vue Components：Vue组件

使用顺序：

1. 组件调用 dispatch('方法名', 参数)方法

   如果参数不需要后端或者一些判断的筛选可以直接调用 commit('方法名', 参数)

2. Actions 找自己身上的'方法名'，然后对参数进行一些动作（判断之类的），然后调用 commit('方法名', 参数)

   需要和后端交互的话，可以在这发送 ajax 请求

3. Mutations 对 State 加工

4. State 给到 组件

这上面的所有的方法、对象…都是由：store 所管理的，就是说需要store.dispatch()...

2.搭建环境

1. 安装 Vuex

   npm i vuex
   

   但是这样不行，因为现在在学Vue2，他只能用Vuex3。现在已经更新到4了，直接安装会安装到4版本

   所以要指定版本：

   npm i vuex@3
   

2. （假）引入 Vuex

   main.js：

   import Vuex from 'vuex';
   // Vuex 是插件
   Vue.use(Vuex)
   // 使用之后就可以使用 store 配置项了
   new Vue({
   	...
   	store: 'haha',	// $store
   ...  
   

3. （假）创建 state：在一个新的js身上暴露

   import Vuex from 'vuex';
   
   // 创建那些乱七八糟的玩意(也可以写里面)
   const actions = {}
   
   const mutations = {}
   
   const state = {}
   
   // 创建 Store 实例对象
   export default new Vuex.Store({
   	actions,
   	mutations,
   	state,
   })
   

   注：这样不行，因为创建 store 需要在使用 Vuex 之后

   import Vuex from 'vuex';
   Vue.use(Vuex)
   import store from './store/index';
   

   这样不行，因为脚手架会自动把所有impot语句放到前面

4. 真正的使用 state

   main：

   import Vue from 'vue'
   import App from './App.vue'
   // 不引入Vuex了，也不使用了
   import store from './store/index.js'	// 这个路径是官方文档给的路径
   
   Vue.config.productionTip = false
   
   new Vue({
   	template:`<App></App>`,
   	components:{App},
   	beforeCreate(){
   		Vue.prototype.$bus = this
   	},
   	store,
   	render: a=>a(App)
   }).$mount('#app')
   
   

   index：

   import Vuex from 'vuex';
   import Vue from 'vue';
   
   // 使用 Vuex
   Vue.use(Vuex)
   
   // 创建那些乱七八糟的玩意(也可以写里面)
   const actions = {}
   
   const mutations = {}
   
   const state = {}
   
   // 创建 Store 实例对象(需要在使用 Vuex 之后)
   export default new Vuex.Store({
   	actions,
   	mutations,
   	state,
   })
   

3.具体使用

拢共分四步：

1. 在state配置想要的数据
2. actions里整些函数，进行对数据筛选、处理等一系列操作。调用commit方法
3. mutations 对数据进行爆改
4. 组件调用dispatch 或者 commit方法

3.1 state

state 添加数据如下:

const state = {
	sum: 0,
}

3.2 actions

const actions = {
    add(context, value){
        // commit:使用mutations里的 ADD
        context.commit('ADD', value)
    }
}

• context (参数1): Store里，actions可能会用到的东西
• commit(‘方法名’, 参数)

逻辑判断一般在这里操作

oddAdd(context, value){
    // context 有 state
    if (context.state.sum % 2) {
        context.commit('ADD', value)	
    }
},
waitAdd(context, value){
    setTimeout(()=>{
        context.commit('ADD', value)
    }, 1000)
}

3.3 mutations

const mutations = {
	// 大写是用于区分于actions的(可以不大写)
	ADD(state, value){
		// 参数1：state
		state.sum += value;

		console.log('ADD');
	},
	REDUCE(state, value){
		state.sum -= value;
	},
}

函数们（参数1：state，参数…：传进来的参数）

3.4 组件的调用

• this.$store.dispatch（‘方法名’，参数）
• this.$store.commit（‘方法名’，参数）

methods: {
    // 使用commit，因为不需要进行什么判断之类的
    addSelect() {
        this.$store.commit，('ADD', this.select)
    },
    reduceSelect() {
        this.$store.commit('REDUCE', this.select)
    },
    oddAdd() {
        this.$store.dispatch('oddAdd', this.select)
    },
    wait() {
        this.$store.dispatch('waitAdd', this.select)
    },
}

使用普通的Vue写:

addSelect() {
    this.value += this.select
},
reduceSelect() {
    this.value -= this.select
},
oddAdd() {
    if (this.value % 2) {
        this.value += this.select
    }
},
wait() {
    setTimeout(()=>{
        this.value += this.select
    },1000)
},

4.例子的完整代码

HaHa：

<template>
	<div>
		<h1>当前求和为: {{ $store.state.sum }}</h1>
		<!-- 或者在这加那个强制转换成number的那个什么 -->
		<select v-model.number="select">
			<!-- 要加: 变更了之后是字符串 -->
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="addSelect">+</button>
		<button @click="reduceSelect">-</button>
		<button @click="oddAdd">奇数加</button>
		<button @click="wait">等等加</button>
	</div>
</template>

<script>
export default {
	data() {
		return {
			select: 1
		}
	},
	methods: {
		addSelect() {
			this.$store.commit('ADD', this.select)
		},
		reduceSelect() {
			this.$store.commit('REDUCE', this.select)
		},
		oddAdd() {
			this.$store.dispatch('oddAdd', this.select)
		},
		wait() {
			this.$store.dispatch('waitAdd', this.select)
		},
	}
}
</script>

Vuex(index.js)

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

// 使用 Vuex
Vue.use(Vuex)

// 创建那些乱七八糟的玩意(也可以写里面)
const actions = {
	// add(context, value){
	// 	// context(参数1): Store里，actions可能用到的东西

	// 	// commit:使用mutations里的 ADD
	// 	context.commit('ADD', value)
	// }
	oddAdd(context, value){
		if (context.state.sum % 2) {
			context.commit('ADD', value)	
		}
	},
	waitAdd(context, value){
		setTimeout(()=>{
			context.commit('ADD', value)
		}, 1000)
	}
}

const mutations = {
	// 大写是用于区分于actions的(可以不大写)
	ADD(state, value){
		// 参数1：state
		state.sum += value;

		console.log('ADD');
	},
	REDUCE(state, value){
		state.sum -= value;
	},
}

const state = {
	sum: 0,
}

// 创建 Store 实例对象(需要在使用 Vuex 之后)
export default new Vuex.Store({
	actions,
	mutations,
	state,
})

5.其他配置项

5.1 getters

返回经过加工的 state

const getters = {
	bigSum(state){
		return state.sum * 10
	}
}

<h4>10倍大的sum:{{ $store.getters.bigSum }}</h4>

5.2 mapXxx

用于生成计算属性

如果 state 它有100万个东西

const state = {
	sum: 0,
	name: '小明',
	age: 111,
}

那么在插值语法里写100万个$store.state.xxx 太麻烦了，如果要写在多个地方那就是 n*100万

那么，变成100万：

computed: {
    sum(){
        return this.$store.sum
    },
    name(){...},
    ...
},

但是还是有 100万，所以 Vuex 出了个方便生成100万的小方法：mapState（这是生成state的，还有 mapGetters…拢共4个）

使用方法：

mapXxx(参数1)

参数1：对象 或 数组

(1) 对象

{
    'computed方法名': 'state属性名',
     ...
}

computed: {
    ...mapState({
        sum: 'sum',
        'name': 'name',		// 其实两个都是字符串
        nianLing: 'age'		// 可以随便取名
    }),	
   // 开发者工具的查看也会普通的不一样
},

(2) 数组

如果，computed方法名 和 state属性名 一致的话，可以使用 数组参数的方式 来使用mapXxx，比较简便

...mapState(['sum', 'name', 'age'])

(3) 其他map

四个map

import {mapState, mapGetters, mapActions, mapMutations} from 'vuex'

从名字可以得知：

• mapState：生成State的
• mapGetters：生成Getters的
• mapActions：生成Actions的（dispatch）
• mapMutations：生成Mutations的（commit）

写法和上面的完全一致，只有一点值得注意：dispatch 和 commit 的参数怎么给

答：methods里的参数怎么给，这就怎么给

<button @click="addSelect(select)">+</button>

methods: {
    ...mapMutations({addSelect: 'ADD', reduceSelect: 'REDUCE'}),
    ...mapActions(['oddAdd', 'waitAdd'])
},