Las propiedades y el uso básico de Vuex

1. estado: proporcione una fuente de datos pública única y todos los datos compartidos se almacenarán en el estado de la Tienda.

La primera forma en que los componentes acceden a los datos en estado:

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

La segunda forma de que los componentes accedan a los datos en estado:

// 1.从vuex中按需导入mapState函数
import { mapState } from 'vuex'
// 2.将全局数据，映射为当前组件的计算属性
computed: {
   ...mapState(['全局数据名称'])
}

2. mutación: se usa para cambiar los datos en la Tienda

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

②De esta manera, aunque la operación es un poco engorrosa, puede monitorear de forma centralizada los cambios de todos los datos.

③ Puede pasar el segundo parámetro del parámetro al activar mutaciones.

// 定义 mutation 
const store = new Vuex.store({
  state: {
    count: 1
  },
  mutations: {
    add(state) {    //  add(state, step)
      //变更状态
      state.count++   // state.count += step
    }
  }
})
//触发mutation 
methods: {
  handel() {
     this.$store.commit('add')  // this.$store.commit('add', 4)
  }
}

La primera forma de desencadenar mutaciones:

this.$store.commit()

La segunda forma de desencadenar mutaciones:

// 1.从vuex中按需导入mapMutations函数
import { mapMutations } from 'vuex'
// 2.将全局数据，映射为当前组件的计算属性
computed: {
   ...mapMutations(['方法名'])
}

3.acción: se usa para manejar tareas asincrónicas '

En Aciton, los datos se modifican indirectamente al activar el método de mutación.

uso:

// 定义 mutation 
const store = new Vuex.store({
  state: {
    count: 1
  },
  mutations: {
    add(state) {    //  add(state, step)
      //变更状态
      state.count++   // state.count += step
    }
  }，
  actions: {
    addAsync(context) {   // addAsync(context, step)
      setTimeout(() => {
        context.commit('add')  // context.commit('add', 3)
      }, 1000)
    }
  }
})
//触发mutation 
methods: {
  handel() {
     this.$store.dispatch('add')  // this.$store.dispatch('add', 4)
  }
}

El primer método para desencadenar acciones:

this.$store.dispatch()

La segunda forma de desencadenar acciones:

// 1.从vuex中按需导入mapActions函数
import { mapActions } from 'vuex'
// 2.将全局数据，映射为当前组件的计算属性
computed: {
   ...mapActions(['方法名'])
}

4.getter: se utiliza para procesar los datos en el almacén para formar nuevos datos.

①getter puede procesar los datos existentes en la tienda para formar nuevos datos.

②Cuando cambien los datos en la tienda, los datos en el captador también cambiarán en consecuencia.

// 定义 mutation 
const store = new Vuex.store({
  state: {
    count: 1
  },
  getters: {
   showNum(state) {
     return '当前最新的数据是：'+state.count
   }
  }
})

La primera forma de activar captadores:

this.$store.getters.方法

La segunda forma de desencadenar acciones:

// 1.从vuex中按需导入mapGetters函数
import { mapGetter } from 'vuex'
// 2.将全局数据，映射为当前组件的计算属性
computed: {
   ...mapGetter(['方法名'])
}

5.module: Modular vuex permite que cada módulo tenga su propio estado, mutación, acción y captadores, lo que hace que la estructura sea muy clara y fácil de administrar.

Las propiedades y el uso básico de Vuex

Supongo que te gusta