Vuex
Vuex est un modèle de gestion d'état développé spécifiquement pour Vue.js. C'est principalement pour l'interaction des données. Il est facile de passer des valeurs entre les composants parent et enfant, mais il est très gênant de passer des valeurs entre les composants frères (il y a des composants parent et enfant sous les composants frères), avec de nombreuses pages et couches imbriquées Parfois, nous utilisons vuex pour maintenir l'état ou les données partagés.
Vuex a cinq concepts de base
1. état : utilisé pour définir des données (équivalentes à des données), utilisé pour obtenir des données définies dans la page :
this.$store.state.变量名
- getters : les propriétés calculées (équivalentes à computed in vue), reposent sur le cache et ne seront recalculées que si les données du cache changent. Les méthodes dans les getters reçoivent un objet d'état en tant que paramètre.
如：
state:{
count: 1
},
getters:{
getCount(state) {
return state.count + 1
}
},
Obtenez-le sur la page avec :
this.$store.getters.getCount
<h2>{
{
this.$store.getters.getCount}}</h2>
- mutations : est le seul moyen de modifier la valeur de l'état, il ne peut s'agir que d'une opération synchrone
pour obtenir dans la page :
this.$store.commit("方法名")
//可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）
store.commit('increment', 10)
// ...
mutations: {
increment (state, n) {
state.count += n
}
}
-
actions : les mutations sont soumises au lieu de modifier directement l'état, qui peut contenir des opérations asynchrones
-
modules: module, Vuex permet de diviser le magasin en modules, chaque module a son propre état, ses getters, ses mutations, ses actions et même ses modules imbriqués. Cela peut éviter les problèmes de programme causés par le même nom 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 // 先找到模块的名字，再去调用属性
utiliser:
Installez vuex :
npm install --save vuex
Configurer vuex
Ajoutez un nouveau dossier de magasin sous le dossier src et ajoutez un fichier index.js à l'intérieur
Ensuite, importez index.js sous le fichier de magasin dans main.js
// main.js内部对vuex的配置
import store from '@/store/index.js'
new Vue({
el: '#app',
store, // 将store暴露出来
template: '<App></App>',
components: {
App }
});
Ensuite, nous commençons à configurer le index.js sous le fichier de magasin
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
// 写方法对数据做出更改(异步操作)
}
})
Exemple :
Définir le prix d'origine du produit en magasin, calculer le prix réduit et calculer le prix total en fonction de la quantité saisie par l'utilisateur et du prix d'origine du produit [1] Nous convenons que les données en magasin
sont sous la forme suivante
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] Utiliser les données du magasin dans la page
```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] Effet de page
Donnons un autre exemple de scénario d'application :
Par exemple, sur la page de connexion, vous pouvez vous connecter avec le code de vérification du numéro de téléphone mobile ou le mot de passe du numéro de téléphone mobile. Lors du changement, nous voulons conservez le numéro de téléphone portable saisi. Pour le moment, nous pouvons utiliser vuex.
Problème de perte de données d'actualisation de page :
Les données stockées par vuex sont stockées dans la mémoire courante en tant que données globales partagées. Lorsque la page est actualisée, l'instance de vue sera rechargée et les données dans vuex seront réinitialisées, ce qui entraînera une perte de données.
Comment y faire face?
Stockez directement les données dans le cache du navigateur (sessionStorage, localStorage, cookie) dans la méthode de modification des données dans vuex. Lorsque vous entrez dans la page, transmettez les données dans la fonction de crochet d'initialisation via window.localStorage.setItem("list", jsON. stringify (s.menuList)) est placé dans le cache et JSON.parse(window.localStorage.getItem("list")))) est utilisé pour le récupérer à partir du cache sur la page. Lorsque la page quitte, les données stockées dans le cache sont détruites dans la fonction de crochet détruit.
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))
},
}
}）
Obtenez-le à partir du stockage local et attribuez-le à vuex lors du chargement de la page
if (window.localStorage.getItem("list") ) {
this.$store.replaceState(Object.assign({
},
this.$store.state,JSON.parse(window.localStorage.getItem("list"))))
}