关于vuex的使用和介绍

一、关于vuex

概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件进行集中式的管理（读/写），也是组件通信的一种方式，且适用于任意组件的通信。vuex当成一个store仓库，可以集中管理共享的数据，并且存储在vuex中的数据都是响应式的，数据与页面同步。

二、什么时候使用Vuex

1.只有组件之间共享的数据，才有必要存储到vuex中；对于组件中的私有数据，依旧存储在组件自身的data中。

2.多个组件依赖于同一个改变的数

一、如何使用Vuex

vue2推荐安装vuex3，应vue2与vuex最新版不兼容，推荐降低vuex3版本

npm i vuex@3

vue3安装

npm install vuex --save

在src创建store目录，创建index.js文件

在store下的index.js添加

import Vuex from "vuex"
import Vue from 'vue'
Vue.use(Vuex)
//用于响应组件的动作
const actions = {
	
}
//用于操作数据
const mutations = {
	
}
//用于存储数据
const state = {
	
}
const getters = { //当state中的数据需要进行加工后在使用，可以使用getters加工
	
}
//创建store
export default new Vuex.Store({
	actions,
	mutations,
	state,
	getters
})
//暴露store

 在main.js进行引入

import store from './store/index.js'

挂载store

import Vue from 'vue'
import App from './App.vue'
import store from './store/index.js'



Vue.config.productionTip = false
//入口文件
new Vue({
  render: h => h(App),
  store,
}).$mount('#app')

二、如何在组件中使用

可以直接在页面中使用 $store.state.命名数据

<template>
	<div>
		<h3>其后1{{sum}}</h3>
		<input type="text" placeholder="请输入" v-model="TAKE" />
		<button @click="add()">添加</button>
		<ul>
			<li v-for="(item,index) in $store.state.personList" :key="item.id">{{item.name}}</li>
		</ul>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		nanoid
	} from 'nanoid';
	export default {
		name: 'Person',
		data() {
			return {
				TAKE: ''
			}
		},
		computed: {
			...mapState({sun:'sum'})
		},
		methods: {
			add() {
				const personlist = {
					id: nanoid(),
					name: this.TAKE
				}

				this.$store.commit('ADD', personlist)
			}
		},
	}
</script>

<style>
</style>

三、使用官方api

<script>
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex' //用于帮助我们映射state中的数据为计算属性//用于帮助我们映射state中的数据为计算属性
	export default {
		data() {
			return {

				num: 1
			}
		},
		computed: {  //存储数据
			// ...mapState({ 
			// 	sum: 'sum',
			// 	name: 'name',
			// 	address: 'address'
			// }),

			...mapState(['sum', 'name', 'address', 'personList']),

			...mapGetters({
				bigSum: 'bigSum'
			})
		},
		methods: {//存储方法

			// add() {
			// 	console.log(this)
			// 	this.$store.commit('JIA', this.num) //直接使用vuex的方法，括号第一个是vuex方法，第二个是传递参数
			// },
			// subtract() {
			// 	this.$store.commit('JIAN', this.num)
			// },

			...mapMutations({
				add: 'JIA',   //第一个本地组件方法命名，第二个vuex的命名，将vuex的方法重新命名
				subtract: 'JIAN'
			}),

			//...mapMutations([JIA,JIAN]) //将vuex的方法命名为vuex中的方法名

			...mapActions({
				qishu: 'qishu',
				time: 'time'
			}),

		},
	}
</script>

 vuex的方法

import Vuex from "vuex"
import Vue from 'vue'
Vue.use(Vuex)
//用于响应组件的动作
const actions = {
	jia(commtext, value) {
		commtext.commit('JIA', value)
	},
	jian(commtext, value) {
		commtext.commit('JIAN', value)
	},
	qishu(commtext, value) {
		if (commtext.state.sum % 2 == 0) {
			commtext.commit('JIA', value)
		}
	},
	time(commtext, value) {
		setTimeout(() => {
			commtext.commit('JIA', value)
		}, 2000)

	}
}
//用于操作数据
const mutations = {
	JIA(state, value) {
		state.sum += value
	},
	JIAN(state, value) {
		state.sum -= value
	},
	ADD(state, value){
		state.personList.push(value)
	}
}
//用于存储数据
const state = {
	sum: 0,
	name: '孙悟空',
	address: '花果园',
	personList: [{
		id: '001',
		name: '张三'
	}]
}
const getters = { //当state中的数据需要进行加工后在使用，可以使用getters加工
	bigSum(state) {
		return state.sum * 10
	}
}
//创建store
export default new Vuex.Store({
	actions,
	mutations,
	state,
	getters
})
//暴露store

四、关于多个模块数据和方法的vuex使用

import Vuex from "vuex"
import Vue from 'vue'
Vue.use(Vuex)
//用于响应组件的动作
const personSum = {
	namespaced: true,
	actions: {

		jia(commtext, value) {
			commtext.commit('JIA', value)
		},
		jian(commtext, value) {
			commtext.commit('JIAN', value)
		},
		qishu(commtext, value) {
			if (commtext.state.sum % 2 == 0) {
				commtext.commit('JIA', value)
			}
		},
		time(commtext, value) {
			setTimeout(() => {
				commtext.commit('JIA', value)
			}, 2000)

		}
	},
	//用于操作数据
	mutations: {
		JIA(state, value) {
			state.sum += value
		},
		JIAN(state, value) {
			state.sum -= value
		},

	},
	//用于存储数据
	state: {
		sum: 0,
		name: '孙悟空',
		address: '花果园',

	},
	getters: { //当state中的数据需要进行加工后在使用，可以使用getters加工
		bigSum(state) {
			return state.sum * 10
		}
	},
}
//求和的相关配置
const perso = {
	namespaced: true,
	actions: {},
	//用于操作数据
	mutations: {
		ADD(state, value) {
			state.personList.push(value)
		}
	},
	//用于存储数据
	state: {
		personList: [{
			id: '001',
			name: '张三'
		}]
	},
	getters: { //当state中的数据需要进行加工后在使用，可以使用getters加工
	},
}
//人数相关配置

export default new Vuex.Store({
	modules: {
		personSum,
		perso
	}
})
//暴露store

 组件内使用

<template>
	<div>
		<h1>当前求和为:{{sum}}</h1>
		<h3>当前求和放大10倍{{bigSum}}</h3>
		<h3>我叫{{name}},家中{{address}}</h3>
		<h3>下方组件的总人数{{personList.length}}</h3>
		<select v-model="num">
			<option v-for="(item,index) in 6" :key="index" :value="item">{{item}}</option>
		</select>
		<button @click="add(num)">+</button>
		<button @click="subtract(num)">-</button>
		<button @click="qishu(num)">当前求和为奇树在加</button>
		<button @click="time(num)">等一等在加</button>
	</div>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex' //用于帮助我们映射state中的数据为计算属性//用于帮助我们映射state中的数据为计算属性
	export default {
		data() {
			return {

				num: 1
			}
		},
	
		computed: {
			
			...mapState('personSum', ['sum', 'name', 'address']),
			...mapState('perso', ['personList']),
		
			...mapGetters('personSum',{
				bigSum: 'bigSum'
			})
		},
		methods: {
	
			...mapActions('personSum',{
				qishu: 'qishu',
				time: 'time'
			}),
		
		},
	}
</script>

<style>
</style>

直接使用方法：this.$store.commit('命名模块/vuex的方法名', 参数)

五、关于vuex的actions,mutations,state, getters

actions：action 用于处理异步任务。如果通过异步操作变更数据，必须通过 action，而不能使用 mutation，但是在 action 中还是要通过触发Mutation 的方式间接变更数据。

mutations：在vuex中不允许组件直接去修改全局域中的数据，必须通过mutation来变更store中的数据。 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化（可以监控是谁更改了state）。

state：state 提供唯一的公共数据源，所有共享的数据都要统一放到 store 的 state 中进行存储。

getters：getter用于对store中的数据进行加工处理并形成新的数据，类似于Vue中的计算属性，store中的数据发生变化，getter中的数据也发生变化，存在一个响应关系。