Vuex
Vuex es un patrón de gestión de estado desarrollado específicamente para Vue.js. Es principalmente para la interacción de datos. Es fácil pasar valores entre componentes padre e hijo, pero es muy problemático pasar valores entre componentes hermanos (hay componentes padre e hijo debajo de componentes hermanos), con muchas páginas y capas anidadas A veces usamos vuex para mantener el estado o los datos compartidos.
Vuex tiene cinco conceptos básicos
1. estado: se usa para definir datos (equivalente a datos), se usa para obtener datos definidos en la página:
this.$store.state.变量名
- captadores: las propiedades calculadas (equivalentes a calculadas en vue), se basan en la memoria caché y solo se volverán a calcular si los datos en la memoria caché cambian. Los métodos en captadores reciben un objeto de estado como parámetro.
如：
state:{
count: 1
},
getters:{
getCount(state) {
return state.count + 1
}
},
Consíguelo en la página con:
this.$store.getters.getCount
<h2>{
{
this.$store.getters.getCount}}</h2>
- mutaciones: es la única forma de modificar el valor del estado, solo puede ser una operación síncrona
para obtener en la página:
this.$store.commit("方法名")
//可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）
store.commit('increment', 10)
// ...
mutations: {
increment (state, n) {
state.count += n
}
}
-
acciones: las mutaciones se envían en lugar de cambiar directamente el estado, que puede contener cualquier operación asíncrona
-
módulos: módulo, Vuex permite dividir la tienda en módulos, cada módulo tiene su propio estado, captadores, mutaciones, acciones e incluso módulos anidados. Puede evitar problemas de programa causados por el mismo nombre de variable.
const moduleA = {
state: {
},
mutations: {
},
actions: {
},
getters: {
}
}
const moduleB = {
state: {
},
mutations: {
},
actions: {
},
getters: {
}
}
export default new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
// 在各自的模块内部使用
state.price // 这种使用方式和单个使用方式一样，直接使用就行
//在组件中使用
store.state.a.price // 先找到模块的名字，再去调用属性
store.state.b.price // 先找到模块的名字，再去调用属性
usar:
Instalar vuex:
npm install --save vuex
Configurar vuex
Agregue una nueva carpeta de tienda debajo de la carpeta src y agregue un archivo index.js dentro
Luego importe index.js debajo del archivo de la tienda en main.js
// main.js内部对vuex的配置
import store from '@/store/index.js'
new Vue({
el: '#app',
store, // 将store暴露出来
template: '<App></App>',
components: {
App }
});
Luego comenzamos a configurar el index.js en el archivo de la tienda
import Vue from 'vue'; //首先引入vue
import Vuex from 'vuex'; //引入vuex
Vue.use(Vuex)
export default new Vuex.Store({
state: {
// state 类似 data
//这里面写入数据
},
getters:{
// getters 类似 computed
// 在这里面写个方法
},
mutations:{
// mutations 类似methods
// 写方法对数据做出更改(同步操作)
},
actions:{
// actions 类似methods
// 写方法对数据做出更改(异步操作)
}
})
Ejemplo:
Defina el precio original del producto en la tienda, calcule el precio con descuento y calcule el precio total en función de la cantidad ingresada por el usuario y el precio original del producto [1] Aceptamos que los datos en la tienda
son en la siguiente forma
import Vue from 'vue'; //首先引入vue
import Vuex from 'vuex'; //引入vuex
Vue.use(Vuex)
export default new Vuex.Store({
state: {
price: 100, // 原价
total: '', // 总价
},
getters:{
// 折扣价
discount(state, getters) {
return state.price*0.8
}
},
mutations:{
// 计算总价：第一个参数为默认参数state, 后面的参数为页面操作传过来的参数
getTotal(state, n) {
return state.total = state.price * n;
}
},
actions:{
// 这里主要是操作异步操作的，使用起来几乎和mutations方法一模一样
// 除了一个是同步操作，一个是异步操作，一个使用commit调用，一个使用dispatch调用
// 这里就不多介绍了，有兴趣的可以自己去试一试，
// 比如你可以用setTimeout去尝试一下
}
})
[2] Usar los datos de la tienda en la página
```javascript
<template>
<div>
<p>原价：{
{
price}}</p>
<p>8折：{
{
discount}}</p>
<p>数量：<input type="text" v-model="quantity"></p>
<p>总价：{
{
total}}</p>
<button @click="getTotal">计算总价</button>
</div>
</template>
<script>
export default {
data() {
return {
quantity: 0,
}
},
computed: {
price() {
return this.$store.state.price
},
discount() {
return this.$store.getters.discount
},
total() {
return this.$store.state.total
}
},
mounted() {
},
methods: {
getTotal() {
this.$store.commit('getTotal', this.quantity)
}
},
}
</script>
[3] Efecto de página
Démosle otro ejemplo del escenario de la aplicación:
por ejemplo, en la página de inicio de sesión, puede iniciar sesión con el código de verificación del número de teléfono móvil o la contraseña del número de teléfono móvil. Al cambiar, queremos mantener el número de teléfono móvil ingresado En este momento, podemos usar vuex.
Problema de pérdida de datos de actualización de página:
Los datos almacenados por vuex se almacenan en la memoria en ejecución como datos compartidos globales. Cuando se actualice la página, la instancia de vue se volverá a cargar y los datos en vuex se reiniciarán, lo que provocará la pérdida de datos.
¿Como lidiar con?
Almacene directamente los datos en la memoria caché del navegador (almacenamiento de sesión, almacenamiento local, cookie) en el método de datos de modificación de vuex y, al ingresar a la página, pase los datos en la función de enlace de inicialización a través de window.localStorage.setItem ("lista", jsON.stringify (s.menuList)) se coloca en la memoria caché y se utiliza JSON.parse(window.localStorage.getItem(“list”)))) para recuperarla de la memoria caché en la página. Cuando la página sale, los datos almacenados en el caché se destruyen en la función de enlace destruido.
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store（{
state: {
orderList: [],
menuList: []
},
mutations: {
orderList(s, d) {
s.orderList= d;
window.localStorage.setItem("list",jsON.stringify(s.orderList))
},
menuList(s, d) {
s.menuList = d;
window.localStorage.setItem("list",jsON.stringify(s.menuList))
},
}
}）
Obtenlo del almacenamiento local y asígnalo a vuex cuando se cargue la página
if (window.localStorage.getItem("list") ) {
this.$store.replaceState(Object.assign({
},
this.$store.state,JSON.parse(window.localStorage.getItem("list"))))
}