Comment enregistrer des données en utilisant vuex dans uniapp

L'utilisation de vuex dans uniapp peut nous aider à rendre le partage et la gestion des données entre les composants plus pratiques et plus concis. Comment sauvegarder des données dans vuex est également une compétence importante que nous devons maîtriser. Ce qui suit présentera en détail comment utiliser vuex pour enregistrer des données dans uniapp.

1. Définir l'état dans vuex

Dans vuex, nous devons d'abord définir un magasin, qui est un gestionnaire d'état global, comprenant des attributs et des méthodes tels que l'état, les mutations, les actions, les getters, etc. Et l’État est la clé pour sauvegarder les données.

Dans uniapp, nous pouvons créer un fichier index.js dans le dossier store sous le répertoire src et y définir l'état. Par exemple :

const state = {
  username: ''
}

Ici, nous définissons un objet d'état qui contient un attribut de nom d'utilisateur et l'initialisons avec une chaîne vide. Ce nom d'utilisateur correspond aux données que nous souhaitons enregistrer dans vuex.

2. Utiliser des mutations pour modifier l'état

Ensuite, nous devons définir une mutation. Dans les mutations, nous pouvons définir différentes opérations, telles que l'ajout de données, la modification de données, la suppression de données, etc. Ici, nous prenons la modification des données comme exemple pour montrer comment enregistrer les données dans un état.

Dans le fichier src/store/index.js, définissez la méthode mutations comme suit :

const mutations = {
  setUsername (state, payload) {
    state.username = payload
  }
}

Ici, nous définissons une méthode setUsername qui reçoit deux paramètres : state et payload. L'état est l'objet d'état que nous avons défini à l'étape précédente et la charge utile correspond aux données modifiées.

La méthode setUsername atteint l'objectif de sauvegarder les données dans l'état en modifiant l'attribut de nom d'utilisateur dans l'objet d'état.

3. Utiliser vuex dans les composants

Maintenant que nous avons défini et enregistré les données dans vuex, nous devons les utiliser dans le composant.

Dans le composant que nous devons utiliser, nous devons introduire vuex et utiliser des méthodes telles que mapState pour obtenir les données dans l'état afin qu'elles puissent être utilisées dans le composant.

import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['username'])
  },
  mounted () {
    console.log(this.username) // 打印出保存在vuex中的数据
  }
}

Ici, nous utilisons la méthode mapState pour mapper les données dans vuex à la propriété calculée dans le composant, et lui donnons un alias comme nom d'utilisateur, afin que nous puissions utiliser this.username dans le composant pour obtenir les données enregistrées dans vuex. .

4. Modifier les données dans vuex dans le composant

Dans l'étape précédente, nous pouvons déjà récupérer les données enregistrées dans vuex dans le composant. L'étape suivante est la logique de traitement des données. Comment modifier les données dans vuex. dans le composant.

Dans le composant, nous pouvons soumettre les méthodes en mutations et modifier les données en état via this.$store.commit('mutations method name', data).

methods: {
  modifyUsername () {
    this.$store.commit('setUsername', 'newUsername')
  }
}

Ici, nous définissons une méthode modifierUsername. Lorsque nous l'appelons dans le composant, nous pouvons soumettre la méthode setUsername via la méthode this.$store.commit et transmettre une nouvelle donnée newUsername. De cette façon, les données enregistrées dans vuex peuvent être modifiées.

5. Résumé

Grâce aux étapes ci-dessus, nous pouvons apprendre à utiliser vuex pour enregistrer et gérer des données dans uniapp. Les étapes sont simples et pas difficiles en pratique. Lors de l'écriture d'applications volumineuses ou complexes, l'utilisation de vuex peut mieux améliorer la maintenabilité et la lisibilité du code, et également accélérer le processus de développement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!