Automotivación
Cuando las personas se encuentran en situaciones adversas, su capacidad para adaptarse al entorno es asombrosa. Las personas pueden soportar la desgracia y también pueden superar la desgracia, porque las personas tienen un potencial asombroso y, siempre que estén decididas a utilizarlo, podrán superar las dificultades.
Descripción general de los conceptos básicos
Los principales conceptos centrales de Vuex son los siguientes:
- Expresar
- Mutación
- Acción
- Adquiridor
Expresar
El estado proporciona la única fuente de datos pública, todos los datos compartidos deben estar unificados en el estado de la tienda para su almacenamiento.
// 创建store 数据源，提供唯一公共数据
const store = new Vuex.Store({
state:{
count:0}
})
La primera forma en que los componentes acceden a los datos en estado:
this.$store.state.全局数据名称
La segunda forma de que los componentes accedan al estado
// 1. 从vuex中按需导入 mapState函数
import {
mapState} from 'vuex'
Asigne los datos globales que necesita el componente actual a las propiedades calculadas calculadas del componente actual a través de la función mapState recién importada
// 2. 将全局数据，映射为当前组件的计算属性
computed :{
...mapState(['count'])
}
Mutación
La mutación se usa para cambiar los datos en la Tienda
① Solo puede cambiar los datos en la Tienda a través de una mutación, y no manipular directamente los datos en la Tienda.
② Aunque la operación es un poco engorrosa, puede monitorear centralmente los cambios de todos datos.
Definir mutación
// 定义Mutation
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
add(state) {
//变更状态
state.count ++
}
}
}
Desencadenar mutación
// 触发mutation
methods:{
handle1(){
// 触发 mutations 的第一种方式
this.$store.commit('add')
}
}
Puede pasar la transmisión cuando se activa la mutación
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
// state 代表state中的全局数据
add(state,step) {
//变更状态
state.count+= step
}
}
}
Desencadenar mutaciones
btnHandler2() {
// 在调用 commit 函数，
// 触发mutations 时携带参数
this.$store.commit('addN', 3)
}
this. $ store.commit () es la primera forma de desencadenar mutaciones y la segunda forma de desencadenar mutaciones
// 1. 从vuex 中按需导入 mapMutation 函数
import {
mapMutations} from 'vuex'
Asigne la función de mutaciones requerida al método de métodos del componente actual a través de la función mapMutations recién importada
methods:{
...mapMutations(['add','addN'])
}
Por lo que no puede escribir código asincrónico en mutaciones.
Acción
La acción se usa para procesar tareas asincrónicas.
Si cambia datos mediante operaciones asincrónicas, debe usar Acción en lugar de Mutación, pero en Acción, debe cambiar indirectamente los datos enviando Mutación.
// 定义 Action
const store = new Vuex.Store({
// ...省略其他代码
mutations: {
add(state) {
//变更状态
// 不要在mutations 函数中执行异步操作
// setTimeout(() => {
// state.count++
// }, 100)
state.count++
},
actions: {
addAsync(context) {
setTimeout(() => {
context.commit('add')
}, 1000)
}
}
}
methods: {
// 异步 地让 count 自增加一
btnHandler3() {
// 这里的 dispatch函数 专门用来触发 action
// 触发 actions 的第一种方式
this.$store.dispatch('addAsync')
}
}
Llevar parámetros al desencadenar acciones tareas asincrónicas
// 定义 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)
}
}
La segunda forma de desencadenar la acción
this. $ store.dispatch () es el primer método para desencadenar acciones
// 1. 从vuex 中按需导入mapActions 的函数
import {
mapActions} from 'vuex'
A través de la función mapActions recién importada, mapee la función de acciones requeridas a los métodos del componente actual:
// 2. 将指定的actions 函数，映射为当前组件的methods方法
methods:{
...mapActions(['addASync','addNASync'])
}
Adquiridor
Getter se usa para procesar los datos en la Tienda para formar nuevos datos
① Getter puede procesar los datos existentes en la Tienda para formar nuevos datos, similar a las propiedades de cálculo de Vue
② Cuando los datos en la Tienda cambian, los datos de Getter también Sigue el cambio
// 定义 Getter
const store =new Vuex.Store({
state:{
count:0
},
getters: {
showNum(state) {
return '当前最新的数量是【' + state.count + '】'
}
}
})
La primera forma de usar Getters
this.$store.getters.名称
La segunda forma de usar gettIng
import {
mapGetters} from 'vuex'
computed :{
...mapGetters(['showNum'])
}
El novio no puede hacer enojar a la novia. La novia está enojada porque el novio está equivocado. En cualquier caso, el novio está equivocado. Si el novio está equivocado, debe aceptar voluntariamente cualquier castigo de la novia, de lo contrario será emparejado con el novio de la novia. Sólo escúpele a Han, el novio debería hacer más feliz a su novia, pensar en su novia, saber cómo sentir lástima y apreciar el jade, y cuidar de su novia. Continuará. . . .