Herramienta de gestión de estado Vuex (desarrollo modular)

1. Lo siguiente es la comprensión de vuex y el diagrama de flujo de trabajo (si ya lo conoce, omítalo y vea el código de implementación)

Vuex es una biblioteca para la gestión estatal desarrollada para aplicaciones Vue.js para ayudar a gestionar el flujo y el intercambio de datos.

A continuación se explican algunos conceptos clave de Vuex:

1. Estado : un único árbol de estado es donde se almacena el estado de toda la aplicación. State es una fuente de datos públicos centralizada que se guarda en Vuex y se puede this.$store.stateacceder a ella a través de . A menudo se considera la única fuente de datos de la aplicación.

2. Captadores : los captadores permiten derivar un nuevo estado a partir del estado almacenado en Vuex. De manera similar a las propiedades calculadas en los componentes de Vue, los Getters pueden procesar y calcular el estado y exponer los resultados a otros componentes.

3. Mutación : La mutación es la única forma de modificar el estado. Las mutaciones deben ser funciones sincrónicas que cambien de estado y realicen un seguimiento de los cambios de estado. Deben llamar al método al enviar commity recibir un parámetro para pasar la carga útil de datos (carga útil). Solo la mutación puede modificar el estado, lo que garantiza la trazabilidad y mantenibilidad de los cambios de estado.

4. Acción : la acción se utiliza para manejar operaciones asincrónicas u operaciones complejas que contienen múltiples mutaciones. La acción puede contener cualquier operación asincrónica, como enviar una mutación para actualizar el estado después de obtener datos del servidor. La acción se activa llamando al método en el componente dispatchy puede recibir una Promesa para que la Mutación pueda enviarse después de que se complete la operación asincrónica.

5. Módulo : El módulo permite dividir Vuex en módulos individuales. Cada módulo tiene su propio estado, Getter, Mutation y Action, y puede anidarse para hacer referencia a otros módulos. Organizar el código de esta manera permite una mejor escalabilidad y mantenimiento, y permite compartir el estado entre diferentes módulos.

Al utilizar Vuex, se puede realizar una gestión centralizada del estado global, de modo que diferentes componentes puedan compartir y actualizar el estado fácilmente. Proporciona un mecanismo de gestión de estado predecible, simplifica el procesamiento y la depuración de flujos de datos y hace que el desarrollo de aplicaciones sea más fácil y más fácil de mantener.

2. Inicio oficial: primero cree una carpeta de la tienda, cree un archivo index.js, introduzca Vue y Vuex, si necesita un desarrollo modular, importe otro archivo js del almacén de la tienda creado en la carpeta index.js y luego use módulos para Los dos de ellos fusionados.

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
import countOptions from './count'
import personOptions from './person'
//应用Vuex插件
Vue.use(Vuex)

//创建并暴露store
export default new Vuex.Store({
	modules:{
		countAbout:countOptions,
		personAbout:personOptions
	}
})

 3. Hay cinco atributos en el almacén de recuento, que se dividen en acciones, mutaciones, estados, captadores y módulos
1. ¿Las acciones se utilizan para procesar operaciones asincrónicas, como solicitudes de axios, operaciones asincrónicas?
2. Las mutaciones se utilizan para procesar datos.
3. el estado se utiliza para inicializar datos
4. Los captadores son similares a los atributos calculados y generalmente procesan los datos procesados
​​5. módulos Desarrollo modular
La función recibida en el objeto de acciones puede recibir dos parámetros, el primero es el objeto de contexto, el segundo es los datos pasados, el método en las mutaciones se puede activar en el contexto,
el método en el objeto de mutaciones puede recibir dos parámetros, el primer parámetro son los datos inicializados por el estado y el segundo parámetro son los datos pasados ​​por la acción.

//求和相关的配置
export default {
	namespaced:true,
	actions:{
		jiaOdd(context,value){
			console.log('actions中的jiaOdd被调用了')
			if(context.state.sum % 2){
				context.commit('JIA',value)
			}
		},
		jiaWait(context,value){
			console.log('actions中的jiaWait被调用了')
			setTimeout(()=>{
				context.commit('JIA',value)
			},500)
		}
	},
	mutations:{
		JIA(state,value){
			console.log('mutations中的JIA被调用了')
			state.sum += value
		},
		JIAN(state,value){
			console.log('mutations中的JIAN被调用了')
			state.sum -= value
		},
	},
	state:{
		sum:0, //当前的和
		school:'不知名',
		subject:'前端',
	},
	getters:{
		bigSum(state){
			return state.sum*10
		}
	},
}

4. Métodos para obtener datos del almacén de datos o distribuir datos en la página:
El primer método: obtener datos o distribuir métodos a través de la función de optimización de vuex
Primero introduzca cuatro métodos, importe {mapState, mapGetters, mapMutations, mapActions} de 'vuex'
en En las propiedades calculadas, puede expandir mapState y mapGetters para obtener datos.
En los métodos, puede expandir mapMutations mapActions para distribuir métodos de acciones o modificar directamente los datos en mutaciones
...mapState('countAbout',['sum','school ',' sujeto']), el primer parámetro significa obtener datos de countAbout en módulos modulares, el segundo parámetro es obtener datos de estado del archivo countAbout, que es un método de matriz... mapMutations('countAbout', {incremento
: 'JIA', decremento:'JIAN'}),
el primer parámetro es el nombre del módulo, el segundo parámetro es un par clave-valor, la clave es el método activado en la página ui y el segundo parámetro es el correspondiente en el método de mutilación 

<template>
	<div>
		<h1>当前求和为：{
   
   {sum}}</h1>
		<h3>当前求和放大10倍为：{
   
   {bigSum}}</h3>
		<h3>我在{
   
   {school}}，学习{
   
   {subject}}</h3>
		<h3 style="color:red">Person组件的总人数是：{
   
   {personList.length}}</h3>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment(n)">+</button>
		<button @click="decrement(n)">-</button>
		<button @click="incrementOdd(n)">当前求和为奇数再加</button>
		<button @click="incrementWait(n)">等一等再加</button>
	</div>
</template>

<script>
	import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		computed:{
			//借助mapState生成计算属性，从state中读取数据。（数组写法）
			...mapState('countAbout',['sum','school','subject']),
			...mapState('personAbout',['personList']),
			//借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
			...mapGetters('countAbout',['bigSum'])
		},
		methods: {
			//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
			...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
			//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
			...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
		},
		mounted() {
			console.log(this.$store)
		},
	}
</script>

<style lang="css">
	button{
		margin-left: 5px;
	}
</style>

5. El método para obtener datos del almacén de datos o distribuir datos en la página:
el segundo método: obtener datos o método de distribución de forma nativa,
el primer paso es introducir el almacén en el archivo de entrada y montarlo en la vm
, y luego puede usarlo en
el módulo Obtener los datos en
Obtener los datos de atributos calculados en el almacén a través de esto.$store.getters['personAbout/firstPersonName']
A través de esto .$store.commit('personAbout/ADD_PERSON ', personObj)
para activar el método de confirmación de mutions en el almacén personAbout es activar directamente la función en el método de mutions. Generalmente, este método se puede usar directamente sin operaciones asincrónicas,
a través de esto .$store.dispatch('personAbout/addPersonWang', personObj)
Activa el método asincrónico en la acción

archivo principal.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
//引入store
import store from './store'

//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store,
	beforeCreate() {
		Vue.prototype.$bus = this
	}
})

documento persona.vue: 

<template>
	<div>
		<h1>人员列表</h1>
		<h3 style="color:red">Count组件求和为：{
   
   {sum}}</h3>
		<h3>列表中第一个人的名字是：{
   
   {firstPersonName}}</h3>
		<input type="text" placeholder="请输入名字" v-model="name">
		<button @click="add">添加</button>
		<button @click="addWang">添加一个姓王的人</button>
		<button @click="addPersonServer">添加一个人，名字随机</button>
		<ul>
			<li v-for="p in personList" :key="p.id">{
   
   {p.name}}</li>
		</ul>
	</div>
</template>

<script>
	import {nanoid} from 'nanoid'
	export default {
		name:'Person',
		data() {
			return {
				name:''
			}
		},
		computed:{
			personList(){
				return this.$store.state.personAbout.personList
			},
			sum(){
				return this.$store.state.countAbout.sum
			},
			firstPersonName(){
				return this.$store.getters['personAbout/firstPersonName']
			}
		},
		methods: {
			add(){
				const personObj = {id:nanoid(),name:this.name}
				this.$store.commit('personAbout/ADD_PERSON',personObj)
				this.name = ''
			},
			addWang(){
				const personObj = {id:nanoid(),name:this.name}
				this.$store.dispatch('personAbout/addPersonWang',personObj)
				this.name = ''
			},
			addPersonServer(){
				this.$store.dispatch('personAbout/addPersonServer')
			}
		},
	}
</script>

archivo persona.js: 

//人员管理相关的配置
import axios from 'axios'
import { nanoid } from 'nanoid'
export default {
	namespaced:true,
	actions:{
		addPersonWang(context,value){
			if(value.name.indexOf('王') === 0){
				context.commit('ADD_PERSON',value)
			}else{
				alert('添加的人必须姓王！')
			}
		},
		addPersonServer(context){
			axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
				response => {
					context.commit('ADD_PERSON',{id:nanoid(),name:response.data})
				},
				error => {
					alert(error.message)
				}
			)
		}
	},
	mutations:{
		ADD_PERSON(state,value){
			console.log('mutations中的ADD_PERSON被调用了')
			state.personList.unshift(value)
		}
	},
	state:{
		personList:[
			{id:'001',name:'张三'}
		]
	},
	getters:{
		firstPersonName(state){
			return state.personList[0].name
		}
	},
}