Notas de front-end de back-end: Vuex

1. Descripción general de Vuex

Vuex es un mecanismo para realizar la gestión del estado global (datos) de los componentes, que puede realizar fácilmente el intercambio de datos entre componentes

Beneficios de usar Vuex para administrar datos:

• Capacidad para administrar de forma centralizada datos compartidos en Vuex, lo cual es conveniente para el desarrollo y mantenimiento posterior
• Capaz de realizar de manera eficiente el intercambio de datos entre componentes y mejorar la eficiencia del desarrollo
• Los datos almacenados en Vuex responden. Cuando los datos cambian, los datos de la página también se actualizarán sincrónicamente.

¿Qué tipo de datos son adecuados para el almacenamiento en Vuex?

En general, solo los datos compartidos entre los componentes deben almacenarse en 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), instale el paquete de dependencia de vuex

npm install vuex --save

2), importe el paquete vuex

import Vuex from 'vuex'

Vue.use(Vuex)

3), crea un objeto de tienda

export default new Vuex.Store({
    
    
	//state中存放的就是全局共享的数据
  state: {
    
    
  },
  mutations: {
    
    
  },
  actions: {
    
    
  },
  modules: {
    
    
  }
})

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

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

3. Funciones principales de Vuex

1） 、 Estado

El estado proporciona la única fuente de datos común y todos los datos compartidos deben almacenarse en el estado en la tienda.

Puede agregar los datos que se compartirán en el objeto State, como: count: 0

export default new Vuex.Store({
    
    
  state: {
    
    
    count: 0
  },
  mutations: {
    
    
  },
  actions: {
    
    
  },
  modules: {
    
    
  }
})

La forma de acceder a State en el componente :

Camino uno :

this.$store.state.全局数据名称,Tal como:this.$store.state.count

<template>
  <div>
    <h3>当前最新的count值为:{
   
   {$store.state.count}}</h3>
    <button>+1</button>
  </div>
</template>

Camino dos :

Primero importe la función mapState según sea necesario:import { mapState } from 'vuex'

Luego, los datos se asignan a los atributos calculados:computed:{ ...mapState(['全局数据名称']) }

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

<script>
import { mapState } from 'vuex'

export default {
  data () {
    return {}
  },
  computed: {
    ...mapState(['count'])
  }
}
</script>

2） 、 Mutación

La mutación se usa para modificar los datos en $ store

• Los datos de la tienda solo se pueden cambiar mediante mutación y los datos de la tienda no se pueden manipular directamente
• Aunque la operación es un poco más engorrosa de esta manera, puede monitorear de manera centralizada los cambios de todos los datos

Definir mutación :

export default new Vuex.Store({
    
    
  state: {
    
    
    count: 0
  },
  mutations: {
    
    
    add (state, step) {
    
    
      // 第一个形参永远都是state也就是$state对象
      // 第二个形参是调用add时传递的参数
      state.count += step
    }
  },
  actions: {
    
    
  },
  modules: {
    
    
  }
})

Trigger Mutation en el componente :

Camino uno :

<template>
  <div>
    <h3>当前最新的count值为:{
   
   {count}}</h3>
    <button @click="btnHandler">+1</button>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data () {
    return {}
  },
  computed: {
    ...mapState(['count'])
  },
  methods: {
    btnHandler () {
      this.$store.commit('add', 1)
    }
  }
}
</script>

Camino dos :

<template>
  <div>
    <h3>当前最新的count值为:{
   
   {count}}</h3>
    <button @click="btnHandler">-1</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  data () {
    return {}
  },
  computed: {
    ...mapState(['count'])
  },
  methods: {
    // 获得mapMutations映射的sub函数
    ...mapMutations(['sub']),
    // 当点击按钮时触发Sub函数
    btnHandler () {
      // 调用sub函数完成对数据的操作
      this.sub(1)
    }
  }
}
</script>

3） 、 Acción

La acción se usa para manejar tareas asincrónicas. Si cambia los datos a través de operaciones asincrónicas, debe usar Acción en lugar de Mutación, pero en Acción, debe cambiar indirectamente los datos activando Mutación.

Camino uno :

export default new Vuex.Store({
    
    
  state: {
    
    
    count: 0
  },
  mutations: {
    
    
    add (state, step) {
    
    
      // 第一个形参永远都是state也就是$state对象
      // 第二个形参是调用add时传递的参数
      state.count += step
    },
    sub (state, step) {
    
    
      state.count -= step
    }
  },
  actions: {
    
    
    addAsync (context, step) {
    
    
      setTimeout(() => {
    
    
        // 在action中,不能直接修改state中的数据 必须通过context.commit()触发某个mutation才行
        context.commit('add', step)
      }, 1000)
    }
  },
  modules: {
    
    
  }
})

<template>
  <div>
    <h3>当前最新的count值为:{
   
   {count}}</h3>
    <button @click="btnHandler">+1</button>
    <button @click="btnHandler2">+1 Async</button>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data () {
    return {}
  },
  computed: {
    ...mapState(['count'])
  },
  methods: {
    btnHandler () {
      this.$store.commit('add', 1)
    },
    btnHandler2 () {
      this.$store.dispatch('addAsync', 1)
    }
  }
}
</script>

Camino dos :

export default new Vuex.Store({
    
    
  state: {
    
    
    count: 0
  },
  mutations: {
    
    
    add (state, step) {
    
    
      // 第一个形参永远都是state也就是$state对象
      // 第二个形参是调用add时传递的参数
      state.count += step
    },
    sub (state, step) {
    
    
      state.count -= step
    }
  },
  actions: {
    
    
    addAsync (context, step) {
    
    
      setTimeout(() => {
    
    
        // 在action中,不能直接修改state中的数据 必须通过context.commit()触发某个mutation才行
        context.commit('add', step)
      }, 1000)
    },
    subAsync (context, step) {
    
    
      setTimeout(() => {
    
    
        context.commit('sub', step)
      }, 1000)
    }
  },
  modules: {
    
    
  }
})

<template>
  <div>
    <h3>当前最新的count值为:{
   
   {count}}</h3>
    <button @click="btnHandler">-1</button>
    <button @click="btnHandler2">-1 Async</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'

export default {
  data () {
    return {}
  },
  computed: {
    ...mapState(['count'])
  },
  methods: {
    // 获得mapMutations映射的sub函数
    ...mapMutations(['sub']),
    ...mapActions(['subAsync']),
    // 当点击按钮时触发Sub函数
    btnHandler () {
      // 调用sub函数完成对数据的操作
      this.sub(1)
    },
    btnHandler2 () {
      this.subAsync(1)
    }
  }
}
</script>

4） 、 Getter

Getter se utiliza para procesar los datos en la Tienda para formar nuevos datos. Solo empaqueta los datos almacenados en la Tienda, y no modifica los datos almacenados en la Tienda. Cuando los datos en la Tienda cambian, el contenido generado por Getter también cambiará.

Definir Getter :

export default new Vuex.Store({
    
    
  state: {
    
    
    count: 0
  },
  mutations: {
    
    
    add (state, step) {
    
    
      // 第一个形参永远都是state也就是$state对象
      // 第二个形参是调用add时传递的参数
      state.count += step
    },
    sub (state, step) {
    
    
      state.count -= step
    }
  },
  actions: {
    
    
    addAsync (context, step) {
    
    
      setTimeout(() => {
    
    
        // 在action中,不能直接修改state中的数据 必须通过context.commit()触发某个mutation才行
        context.commit('add', step)
      }, 1000)
    },
    subAsync (context, step) {
    
    
      setTimeout(() => {
    
    
        context.commit('sub', step)
      }, 1000)
    }
  },
  getters: {
    
    
    showNum (state) {
    
    
      return '当前最新的数量是【' + state.count + '】'
    }
  },
  modules: {
    
    
  }
})

Utilice Getter en componentes :

Camino uno :

<template>
  <div>
    <h3>{
   
   {$store.getters.showNum}}</h3>
    <button @click="btnHandler">+1</button>
    <button @click="btnHandler2">+1 Async</button>
  </div>
</template>

Camino dos :

<template>
  <div>
    <h3>{
   
   {showNum}}</h3>
    <button @click="btnHandler">-1</button>
    <button @click="btnHandler2">-1 Async</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

export default {
  data () {
    return {}
  },
  computed: {
    ...mapState(['count']),
    ...mapGetters(['showNum'])
  },
  methods: {
    // 获得mapMutations映射的sub函数
    ...mapMutations(['sub']),
    ...mapActions(['subAsync']),
    // 当点击按钮时触发Sub函数
    btnHandler () {
      // 调用sub函数完成对数据的操作
      this.sub(1)
    },
    btnHandler2 () {
      this.subAsync(1)
    }
  }
}
</script>