Quels sont les cinq attributs de vuex

Les cinq attributs de vuex sont : 1. l'attribut state, utilisé pour stocker les variables ; 2. l'attribut getters, équivalent à l'attribut calculé de l'état ; 3. l'attribut mutations, utilisé pour soumettre les données de mise à jour ; attribut ;5. Attribut Modules, utilisé pour vuex modulaire.

Recommandé : "tutoriel vue"

Cinq attributs et utilisation de base de vuex dans vue

VueX est un framework de gestion d'état spécialement conçu pour les applications Vue.js. Il gère et maintient uniformément l'état modifiable de chaque composant vue (vous pouvez le comprendre comme des données dans le composant vue).

Vuex a cinq concepts fondamentaux :

state, getters, mutations, actions, modules.

1. state : données de base de vuex, utilisées pour stocker les variables

2. geeter : données dérivées des données de base (state), équivalentes aux attributs calculés de state

3. Mutation : la méthode pour soumettre les données mises à jour doit être synchrone (si vous devez utiliser l'action de manière asynchrone). Chaque mutation a un type d'événement de chaîne (type) et une fonction de rappel (gestionnaire).

La fonction de rappel est l'endroit où nous modifions réellement l'état, et elle acceptera l'état comme premier paramètre et soumettra la charge utile comme deuxième paramètre.

4. Action : La fonction est à peu près la même que la mutation. La différence est ==》1. L'action soumet la mutation au lieu de changer directement l'état. 2. L'action peut contenir n'importe quelle opération asynchrone.

5. Modules : Vuex modulaire permet à chaque module d'avoir son propre état, mutation, action et getters, ce qui rend la structure très claire et facile à gérer.

Utilisation de Vuex :

Créer un nouveau projet vue testApp ==》Créer un fichier de magasin dans testApp==》Sous le fichier de magasin se trouvent le dossier modules, getter.js et index.js == 》Construisez user.js sous le fichier store

et introduisez-le dans le main.js du projet import store depuis './store'

Introduisez-le dans index.js. sous le fichier de magasin

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import global from './modules/global'
import getters from './getters'
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    user
  },
  getters
})
export default store
　　在store文件下的getters.js中引入
const getters = {
  self: state => state.user.self,
  token: state => state.user.token,
  currentCommunity: (state, getters) => {
    let cid = getters.currentCommunityId
    return getters.communities.filter(item => {
      return item.communityId === cid
    })
  }
}
export default getters
　　在modules文件下的user.js写代码
const user = {
        state:{
            self: null,
            token: '',
        },
        mutations:{
            SET_SELF: (state, self) => {
                 state.self = self
             },
             SET_TOKEN: (state, token) => {
                 state.token = token
             }
        },
        actions:{
             login ({ commit }, res) {
                  commit('SET_SELF', res.self)
                  commit('SET_TOKEN', res.token
            }       
}
export default user

Utilisez les deux méthodes suivantes pour stocker les données :

　　dispatch：异步操作，写法： this.$store.dispatch('mutations方法名',值)
　　commit：同步操作，写法：this.$store.commit('mutations方法名',值)

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!