Cubo Vuex de la familia Vue

Cubo Vuex de la familia Vue

1. Descripción general de Vuex

1.1 Cómo compartir datos entre componentes

父向子传值enlace de propiedad :v-bind

子向父传值enlace de evento :v-on

兄弟组件之间共享数据： Autobús de eventos

• $onel componente que recibe los datos
• $emitel componente que envía los datos

1.2 ¿Qué es Vuex?

VuexEs un mecanismo para realizar la gestión del estado global (datos) de los componentes, lo que puede ser conveniente 实现组件之间数据的共享.

1.3 Los beneficios de usar Vuex para administrar el estado de manera uniforme

① Capaz de administrar de forma centralizada los datos compartidos en vuex, que es fácil de desarrollar y mantener

② Puede realizar de manera eficiente el intercambio de datos entre componentes y mejorar la eficiencia del desarrollo

③ Los datos almacenados en vuex responden y pueden mantener los datos sincronizados con la página en tiempo real

1.4 Qué tipo de datos son adecuados para almacenar en Vuex

En general, 只有组件之间共享的数据，才有必要存储到 vuex 中para los datos privados en el componente, aún se pueden almacenar en los datos del propio componente.

2. Uso básico de Vuex

1. Instalar dependencias vuex

npm install vuex --save

2. Importar el paquete vuex

import Vuex from 'vuex'
Vue.use(Vuex)

3. Crea un objeto de tienda

const store = new Vuex.Store({
    
    
	// state 中存放的就是全局共享的数据
	state: {
    
     count: 0 }
})

4. Monte el objeto de la tienda en la instancia de vue

new Vue({
    
    
	el: '#app', 
	render: h => h(app), 
	router, 
	// 将创建的共享数据对象，挂载到 Vue 实例中 
	// 所有的组件，就可以直接从 store 中获取全局的数据了 
	store 
})

Caso: Calculadora

Abra el proyecto vuex que acaba de crear, busque el que está en el directorio src App.vue组件y vuelva a escribir el código de la siguiente manera:

<template>
  <div>
    <my-addition></my-addition>

    <p>----------------------------------------</p>

    <my-subtraction></my-subtraction>
  </div>
</template>

<script>
import Addition from './components/Addition.vue'
import Subtraction from './components/Subtraction.vue'

export default {
    
    
  data() {
    
    
    return {
    
    }
  },
  components: {
    
    
    'my-subtraction': Subtraction,
    'my-addition': Addition
  }
}
</script>

<style>
</style>

Creado en la carpeta de componentes Addition.vue组件, el código es el siguiente:

<template>
    <div>
        <h3>当前最新的count值为：</h3>
        <button>+1</button>
    </div>
</template>

<script>
export default {
  data() {
    return {}
  }
}
</script>

<style>
</style>

Creado en la carpeta de componentes Subtraction.vue组件, el código es el siguiente:

<template>
    <div>
        <h3>当前最新的count值为：</h3>
        <button>-1</button>
    </div>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    }
  }
}
</script>

<style>
</style>

Finalmente, cree un .prettierrcarchivo y escriba el código de la siguiente manera:

{
    "semi":false,
    "singleQuote":true
}

3. Conceptos centrales de Vuex

3.1 Descripción general de los conceptos básicos

Los principales conceptos básicos en Vuex son los siguientes:

• Expresar
• Mutación
• Acción
• Adquiridor

3.2 Estado

StateProporcione la única fuente de datos pública y todos los datos compartidos deben almacenarse en el estado de la tienda.

// 创建store数据源，提供唯一公共数据
const store = new Vuex.Store({
    
    
	state: {
    
     count: 0 }
})

Datos de acceso al componente en estado 第一种方式:

this.$store.state.全局数据名称

Datos de acceso al componente en estado 第二种方式:

// 1. 从 vuex 中按需导入 mapState 函数
import {
    
     mapState } from 'vuex'

A través de la función mapState importada, los datos globales requeridos por el componente actual se asignan a la propiedad calculada del componente actual:

// 2. 将全局数据，映射为当前组件的计算属性 
computed: {
    
     
	...mapState(['count']) 
}

3.3 Mutación

MutationSe utiliza para cambiar los datos en la Tienda.

①Los datos de la tienda solo se pueden cambiar a través de la mutación, y los datos de la tienda no se pueden manipular directamente.

②De esta manera, aunque la operación es un poco más engorrosa, los cambios de todos los datos se pueden monitorear de forma centralizada.

// 定义 Mutation 
const store = new Vuex.Store({
    
     
	state: {
    
     
		count: 0 
	}, 
	mutations: {
    
     
		add(state) {
    
     
			// 变更状态 
			state.count++ 
		} 
	} 
})

// 触发mutation 
methods: {
    
     
    	handle1() {
    
     
            // 触发 mutations 的第一种方式 
            this.$store.commit('add') 
        } 
}

Puede pasar parámetros al iniciar mutaciones:

// 定义Mutation
const store = new Vuex.Store({
    
    
	state: {
    
    
		count: 0
	},
	mutations: {
    
    
		addN(state, step) {
    
    
		// 变更状态
		state.count += step
		}
	}
})

// 触发mutation 
methods: {
    
     
	handle2() {
    
     
		// 在调用 commit 函数， 
		// 触发 mutations 时携带参数 
		this.$store.commit('addN', 3) 
	} 
}

this.$store.commit() es la primera forma de desencadenar mutaciones, lo que desencadena mutaciones 第二种方式:

// 1. 从 vuex 中按需导入 mapMutations 函数
import {
    
     mapMutations } from 'vuex'

A través de la función mapMutations importada, asigne la función de mutaciones requerida al método de métodos del componente actual:

// 2. 将指定的 mutations 函数，映射为当前组件的 methods 函数
methods: {
    
    
	...mapMutations(['add', 'addN'])
}

3.4 Acción

ActionSe utiliza para manejar tareas asincrónicas.

Si cambia datos a través de operaciones asincrónicas, debe usar Acción en lugar de Mutación, pero en Acción, aún necesita cambiar datos indirectamente activando Mutación.

// 定义 Action
const store = new Vuex.Store({
    
     
	// ...省略其他代码 
	mutations: {
    
     
		add(state) {
    
     
			state.count++ 
		} 
	}, 
	actions: {
    
     
		addAsync(context) {
    
     
			setTimeout(() => {
    
     
				context.commit('add') 
			}, 1000) 
		} 
	} 
})

// 触发 Action
methods: {
    
    
	handle() {
    
    
		// 触发 actions 的第一种方式
		this.$store.dispatch('addAsync')
	}
}

Transportar parámetros al desencadenar la tarea asincrónica de acciones:

// 定义 Action 
const store = new Vuex.Store({
    
     
	// ...省略其他代码 
	mutations: {
    
     
		addN(state, step) {
    
     
			state.count += step 
		} 
	}, 
	actions: {
    
     
		addNAsync(context, step) {
    
     
			setTimeout(() => {
    
     
				context.commit('addN', step) 
			}, 1000)
        }
   }
})

// 触发 Action 
methods: {
    
    
	handle() {
    
     
		// 在调用 dispatch 函数， 
		// 触发 actions 时携带参数 
		this.$store.dispatch('addNAsync', 5) 
	} 
}

this.$store.dispatch() es la primera forma de desencadenar acciones, que desencadena acciones 第二种方式:

// 1. 从 vuex 中按需导入 mapActions 函数 
import {
    
     mapActions } from 'vuex'

A través de la función mapActions importada, asigne la función de acciones requerida al método de métodos del componente actual:

// 2. 将指定的 actions 函数，映射为当前组件的 methods 函数 
methods: {
    
     
	...mapActions(['addASync', 'addNASync']) 
}

3.5 Captador

GetterSe utiliza para procesar los datos en la Tienda para formar nuevos datos.

①Getter puede procesar los datos existentes en la Tienda para formar nuevos datos, de forma similar a las propiedades calculadas de Vue.

②Cuando cambien los datos en Store, los datos en Getter también cambiarán.

// 定义 Getter
const store = new Vuex.Store({
    
    
	state: {
    
    
		count: 0
	},
	getters: {
    
    
		showNum: state => {
    
    
			return '当前最新的数量是【'+ state.count +'】'
		}
	}
})

La primera forma de usar captadores:

this.$store.getters.名称

Usando captadores 第二种方式:

import { mapGetters } from 'vuex'

computed: {
	...mapGetters(['showNum'])
}