Concepto : vuex es equivalente a un almacén público, que almacena datos que pueden ser compartidos por todos los componentes, y los datos almacenados responden y mantienen las páginas y los datos sincronizados.
Beneficios : si desea utilizar datos ancestrales en subcomponentes, no necesita pasar valores capa por capa y también resuelve el problema de que los componentes hermanos no pueden pasar valores directamente.
Puntos específicos:
Puede administrar de forma centralizada datos compartidos en vuex, lo cual es conveniente para el desarrollo y el mantenimiento posterior.
Puede realizar de manera eficiente el intercambio de datos entre componentes y mejorar la eficiencia del desarrollo.
Los datos almacenados en vuex responden y cuando los datos cambian, los datos de la página también se actualizarán sincrónicamente.
Tabla de contenido
Método 1: Usar directamente en la etiqueta: { {this.$store.state.name}}
Método 2: nombre de datos this.$store.state.global
Método 3: propiedad calculada (devuelve this.$store.state.count)
Método 4: función auxiliar mapState (asignada en la propiedad calculada)
Cómo se utilizan las mutaciones:
Método 1: this.$store.commit('xxx')
Método 2: función auxiliar mapMutations (asignada en métodos)
Método 1: activar acciones a través de este método $store.dispatch()
Método 2: función auxiliar mapActions (asignada en métodos)
Método 1: acceder a { {this.$store.getters.showCount} a través de atributos
Método 2: función auxiliar mapGetters (asignada en propiedades calculadas)
instalación de vuex
$ npm install vuex --save
En un sistema de empaquetado modular, Vuex debe instalarse explícitamente a través de Vue.use()
importVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)
1. Estado
State proporciona la única fuente de datos públicos y todos los datos compartidos deben almacenarse en State in Store
const store= newVuex.Store({
//数据，相当于data
state: {
name:"张三",
count:0}
//可以拿到state里的数据，操作state数据的方法
mutation:{
add(state){
state.count=state.count+1}
}
Uso específico:
1. Cree un nuevo archivo src/store/index.js
// 新建 src/store/index.js 文件importVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)
exportdefaultnewVuex.Store({
state: {
count: 0
},
mutations: {},
actions: {},
getters: {}
})
2. Introducir en la entrada main.js
importVuefrom'vue'importAppfrom'./App.vue'// 引入import store from'./store'Vue.config.productionTip = falsenewVue({
// 挂载，把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件store: store,
render: h =>h(App)
}).$mount('#app')
Al registrar la opción de tienda en la instancia raíz, la instancia de la tienda se inyectará en todos los subcomponentes del componente raíz y se podrá acceder a los subcomponentes a través de this.$store.
Siempre que el objeto vuex (tienda: tienda) se guarde en el antepasado, los datos compartidos pueden ser utilizados tanto por antepasados como por descendientes.
Cómo utilizar el estado:
Método 1: utilizar directamente en la etiqueta: <p>{ {this.$store.state.name}}</p>
<p>{
{this.$store.state.name}}</p>
Método 2: nombre de datos this.$store.state.global
{
{$store.state.全局数据名称}}
<template>
<div>
<h3>当前最新的count值为：{
{ $store.state.count }}</h3>
<button>++</button>
</div>
</template>
Método 3: propiedad calculada (devuelve this.$store.state.count)
La forma más sencilla de leer el estado de una instancia de tienda es devolver algún estado en una propiedad calculada :
¡Todos miren! Para comprender mejor la función auxiliar mapState que se describirá a continuación, escribí dos formas de escritura en este código.
<template>
<div>{
{ count }}</div>
</template>
<script>exportdefault {
computed: {
count () {
returnthis.$store.state.count;//这么写太麻烦啦，看下面我的语法糖，我的简化写法
...mapState(['count'])//我是上面那行的简化写法！我用了辅助函数mapState，映射在computed中
}
}
}
</script>
Sin embargo, este patrón da como resultado componentes que dependen de un singleton para el estado global. En un sistema de construcción modular, se requieren importaciones frecuentes en cada componente que requiere estado.
Método 4: función auxiliar mapState (asignada en la propiedad calculada)
Los datos se asignan como una propiedad calculada: calculado:{ ...mapState(['nombre de datos globales']) }
Cuando un componente necesita obtener varios estados, declarar estos estados como propiedades calculadas es un poco repetitivo y redundante. Para resolver este problema, la función auxiliar mapState nos ayuda a generar propiedades calculadas, ahorrándole algunas pulsaciones de teclas:
<template>
<div><h3>当前最新的count值为：{
{ count }}</h3><button>--</button></div>
</template>
<script>import { mapState } from'vuex'exportdefault {
data() {
return {}
},
computed: {...mapState(['count'])}
}
</script>
Dos, mutaciones
En pocas palabras: el método para almacenar y operar el estado, y el método para enviar y actualizar el estado, es decir, para modificar el valor.
Nota: En Vuex, todas las mutaciones son sincrónicas .
La única forma de cambiar el estado en la tienda de Vuex es enviar una mutación.
Las mutaciones en Vuex son muy similares a los eventos: cada mutación tiene un tipo de evento de cadena (tipo) y una función de devolución de llamada (controlador) .
mutations: {
//第一个形参永远都是state, 第二个形参是调用add时传递的参数add(state, step) {
state.count += step
}
}
Cómo se utilizan las mutaciones:
Método 1: this.$store.commit('xxx')
<template>
<div><h3>当前最新的count值为：{
{ $store.state.count }}</h3><button @click="add">++</button></div>
</template>
<script>exportdefault {
data() {
return {}
},
methods: {
//第二种方式，两种达到的目的一致，用辅助函数可以简化写法。映射在method中。
...mapMutations(['add'])
add() {
//第一种方式：commit就是调用某个mutation函数this.$store.commit('add', 1)
this.add(1)//第二种方式
}
}
}
</script><stylelang="less"scoped></style>
Para comprender mejor las funciones auxiliares a continuación, también escribí el método de escritura de funciones auxiliares anterior.
Método 2: función auxiliar mapMutations (asignada en métodos)
Utilice la función auxiliar mapMutations para mapear métodos
<template>
<div><h3>当前最新的count值为：{
{ count }}</h3><button @click="btn">--</button></div>
</template>
<script>import { mapState, mapMutations } from'vuex'exportdefault {
data() {
return {}
},
methods: {
// 第二种方式// 将 this.sub() 映射为 this.$store.commit('sub')
...mapMutations(['sub']),
btn() {
this.sub(2)
}
},
computed: mapState(['count'])
}
</script><stylelang="less"scoped></style>
Tres, acciones
La acción es similar a la mutación, maneja especialmente la asincronía , la diferencia es:
La acción envía una mutación en lugar de cambiar directamente el estado, es la mutación la que realmente modifica el valor.
La acción puede contener operaciones asincrónicas arbitrarias. La mutación sólo puede contener operaciones sincrónicas.
Cómo utilizar acciones:
Método 1: activar acciones a través de este método $store.dispatch()
注：store文件夹下的index.jsexportdefaultnewVuex.Store({
state:{
count:111,
name:'笛子兔'
},
mutations:{
add(state,s){
state.count+=s
}
},
actions:{
addlow(c,step){
setTimeout(()=>{
//Action 提交的是 mutation，而不是直接变更state，真正修改值的还是mutation。
c.commit('add',step)//mutation中的add
},2000)
}
},
getters:{},
})
注：在使用vuex的组件中
<template>
<divclass="hello">
{
{count}}
<inputtype="button" @click='adds'value='点我加'><inputtype="button" @click='addAction'value='点我慢加'></div></template><script>import { mapActions, mapMutations, mapState } from'vuex'exportdefault {
name: 'HelloWorld',
computed:{
...mapState(['count'])
},
methods:{
//mutation语法糖--map辅助寒素
...mapMutations(['add']),
//actions语法糖--map辅助函数
...mapActions(['addlow']),
adds(){
//commit调用某个mutation的函数// this.$store.commit('add',100)this.add(100)
},
addAction(){
// dispatch专门用来触发action// this.$store.dispatch('addlow',333)this.addlow(444)
}
}
}
</script>
Método 2: función auxiliar mapActions (asignada en métodos)
Utilice la función auxiliar mapActions para mapear métodos. El método de escritura es similar a la mutación, en comparación con el código anterior.
Cuatro, captadores
Consistente con lo calculado.
Solo empaquetará los datos guardados en la Tienda y no modificará los datos guardados en la Tienda.
Cuando los datos en la Tienda cambian, el contenido generado por Getter también cambiará en consecuencia.
La diferencia entre propiedades calculadas suplementarias y propiedades de escucha:
①Intención original del diseño calculado: almacenar expresiones complejas en plantillas. Basado en el almacenamiento en caché receptivo, solo se reevaluará cuando cambie. Se llama varias veces antes de que el cambio solo se ejecute una vez.
②La intención original del atributo de monitoreo: monitorear los cambios de datos.
Si los datos se almacenan en caché con una propiedad calculada del componente. Si los datos están en vuex, guárdelos en caché con captadores.
getters: {
// 添加了一个 showCountshowCount: state => {
return'最新的count值: ' + state.count
}
}
Cómo utilizar captadores
Método 1: acceder a { {this.$store.getters.showCount} a través de atributos
Método 2: función auxiliar mapGetters (asignada en propiedades calculadas)
El siguiente es un resumen del uso de las cuatro funciones auxiliares, que han sido marcadas
<template>
<div><h3>{
{ showCount }}</h3><button @click="btn">--</button><button @click="btn2">-- Async</button></div>
</template>
<script>import { mapState, mapMutations, mapActions, mapGetters } from'vuex'exportdefault {
data() {
return {}
},
methods: {
//mutations语法糖--映射在methods// 将 this.sub() 映射为 this.$store.commit('sub')
...mapMutations(['sub']),
btn() {
this.sub(2)
},
// actions语法糖--映射在methods// 将this.subAsync() 映射为 this.$store.dispatch('subAsync')
...mapActions(['subAsync']),
btn2() {
this.subAsync(5)
}
},
computed: {
//state语法糖--映射在computed
...mapState(['count']),
//getters语法糖--映射在computed
...mapGetters(['showCount'])
}
}
</script>
Después de leer tanto, estoy cansado ~ Resumamos ~
Vuex, que es equivalente a un almacén público, almacena datos que pueden ser compartidos por todos los componentes. Los datos almacenados responden y mantienen las páginas y los datos sincronizados. El intercambio de datos entre componentes hace que el desarrollo sea muy eficiente.
1. Estado: utilizado para almacenar datos, la única fuente de datos públicos
Cómo utilizar el estado:
Método 1: Usar directamente en la etiqueta: { {this.$store.state.name}}
Método 2: nombre de datos this.$store.state.global
Método 3: propiedad calculada (devuelve this.$store.state.count)
Método 4: función auxiliar mapState (asignada en la propiedad calculada) calculada:{ ...mapState(['nombre de datos globales']) }
2. Mutaciones : el método de envío y actualización del estado. En Vuex, todas las mutaciones están sincronizadas.
La única forma de cambiar el estado en la tienda de Vuex es enviar una mutación.
// El primer parámetro formal siempre es el estado y el segundo parámetro formal es el parámetro pasado al llamar al método
Cómo se utilizan las mutaciones:
Método 1: this.$store.commit('xxx')
Método 2: función auxiliar mapMutations (asignada en métodos)...mapMutations(['nombre del método de mutación'])
3. Acciones: similar a las mutaciones, que se manejan de forma asincrónica , la diferencia es: las acciones envían mutaciones en lugar de cambiar directamente el estado, y las mutaciones en realidad modifican el valor . La mutación sólo puede contener operaciones sincrónicas.
Cómo utilizar acciones:
Método 1: activar acciones a través de este método $store.dispatch()
Método 2: función auxiliar mapActions (asignada en métodos)...mapActions(['nombre del método de acciones'])
4. Getters --- Similar a las propiedades calculadas, se usa para almacenar en caché, almacenar expresiones y, si los datos son un componente, se almacenan en caché con propiedades calculadas. Si los datos están en vuex, guárdelos en caché con captadores.
Cómo utilizar captadores:
Método 1: acceder a { {this.$store.getters.showCount} a través de atributos
Método 2: función auxiliar mapGetters (asignada en propiedades calculadas) ...mapGetters(['showCount'])
Para funciones auxiliares: los captadores y el estado se asignan a propiedades calculadas, las mutaciones y acciones se asignan a métodos
También hay modularización en la parte posterior, que es adecuada para amigos que los han entendido completamente, y puede haber más