Comment implémenter la gestion globale de l'état dans vuejs

Vuex peut être utilisé pour réaliser une gestion globale de l'état dans vuejs ; Vuex est un modèle de gestion d'état spécialement développé pour les applications Vue.js. Il peut être utilisé pour gérer les données globales et l'état des données d'applications complexes, telles que la communication entre les composants frères. . Transmission de valeurs de composants imbriqués multicouches, etc.

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

vuex global state management

Vuex est un Vuex 是一个专为Vue.js 应用程序开发的状态管理模式。可以管理复杂应用的数据状态，比如兄弟组件的通信、多层嵌套的组件的传值等等。

通俗的来说vuex就是全局数据管理，用来管理全局数据的，vue原本的数据管理只能父子组件之间传递数据，并且不方便，使用vuex可以进行全局数据管理，将所有数据存储到vuex中，使用时调用。

vuex的核心：

• state
• mutations
• actions
• getter

Vuex的用法

安装并使用vuex

安装

1.在项目中进行安装

npm install vuex --save

2.新建一个store.js文件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
      //存放初始数据
    count: 0
  },
  mutations: {
      //存放修改数据的方法
    increment (state) {
      state.count++
    }
  }
})

使用数据

方法一：使用$store调用

在组件中直接使用this.$store.state调用数据

this.$store.state.数据名

方法二：导入mapState,在组件中将数据展开映射,需要写到计算属性中，使用的时候直接写 count就行

//先导入mapState
import {mapState} from 'vuex'

computed:[
    ...mapState(['count'])
]

在对数据进行操作时，不能直接调用state的数据，如果要修改数据，需要在mutation里写方法，目的就是方便查找哪里除了问题

Mutations的作用与使用方法

mutations里面就是写对数据进行操作的方法的

  mutations: {
//存放修改数据的方法
   add(state) {
     state.count++
   }
 }

使用方式一：

触发mutations函数，使用commit调用里面的方法名

this.$store.commit这是触发mutation的第一种方式

methods:{
   handle(){
       this.$store.commit('add')
   }
}

mutations传参mutation的方法里可以传递两个参数，第一个就是state,第二个是自定义的参数payload

  mutations: {
//存放修改数据的方法
   addN(state，N) {
     state.count+=N
   }
 }

调用是在组件的方法里

methods:{
   handle2(){
       //触发mutation并传参
       this.$store.commit('addN',4)
   }
}

使用方法二

在组件中导入vuex里的mapMutations函数

mapMutations(['sub'])是对里面的方法与store里的方法进行映射

...是展开操作符

import {mapMutations} from 'vuex'

methods:{
   //将方法名写在[]里  ['addN','sub']
   ...mapMutations(['sub'])
   btnhandle(){
       //调用时直接写this.方法名
       this.sub()
       //当传入参数时，直接写这个参数，不需要写state
       this.addN(4)
   }
}

注意:在Mutation函数里不能写异步代码；比如写定时函数，虽然页面会改变，但是实际状态数值不会变。于是就有了actions

Actions的用法

Action用于处理异步任务。

如果通过异步操作变更数据，必须通过Action，而不能使用Mutation，但是在Action中还是要通过触发Mutation的方式间接变更数据.

在store里与mutations同级写一个actions:{ } 在它里面调用mutations的方法，然后在组件中触 发Actions

  mutations: {
  //存放修改数据的方法
    add(state) {
      state.count++
    }
  },
  actions:{
      //context是上下文
      addAsync(context){
          setTimeout(()=>{
              //调用add方法，actions中不能直接修改state中的数据，只有mutation有这个权力
              context.commit('add')
          })
      }
  }

使用actions要在组件中使用dispatch进行触发

btnHandle(){
    //dispatch专门触发action
    this.$store.dispatch('addAsync')
}

actions传递参数

在store的actions里和mutations都要写形参

  mutations: {
  //传参
    addN(state,n) {
      state.count+=n
    }
  },
  actions:{
      //context是上下文
      addAsync(context,n){
          setTimeout(()=>{
              //调用add方法，并传参
              context.commit('addN',n)
          })
      }
  }

在组件中写实参

btnHandle(){
    //dispatch专门触发action,并传入参数
    this.$store.dispatch('addAsync',5)
}

第二种是展开并映射引入mapActions

//引入方法
import {mapActions} from 'vuex

methods:{
    //映射actions
    ...mapActions(['addAsync'])
    btnhandle(){
        //调用对应的actions
        this.addAsync()
    }
}
//也可以不写btnhandle方法了直接将映射的方法名写在点击操作上

注意：在组件中调用actions方法，在actions中使用commit调用mutations方法

getters

• Getter用于对Store中的数据进行加工处理形成新的数据。不会修改原数据
• Getter可以对Store中已有的数据加工处理之后形成新的数据，类似Vue的计算属性。
• Store中数据发生变化，Getter的数据也会跟着变化.

state:{
   count:0
},
getters:{
   showNum(state){
       return '当前最新的数据是:'+state.count
   }
}

第一种调用方式：this.$store.getters.方法名

this.$store.getters.showNum

第二种调用方式：映射展开，在computed中映射

import {mapGetters} from 'vuex'

computed:{
   ...mapGetters(['showNum'])
}

总结

• state是存放初始数据，进行数据初始化的，最好不要在组件里直接调用state
• mutations里面是存储对数据进行操作的方法，但是不能进行异步操作
• actions里面是进行异步操作的方法
• gettersstate management pattern
développé spécifiquement pour les applications Vue.js. Il peut gérer l'état des données d'applications complexes, telles que la communication entre composants frères, le transfert de valeur entre composants imbriqués multicouches, etc.

En termes simples, vuex est une gestion globale des données, utilisée pour gérer les données globales. La gestion des données originale de Vue ne peut transférer des données qu'entre les composants parents et enfants, et elle n'est pas pratique. Utilisez vuex pour gérer les données globales et stocker toutes les données dans In vuex. , on l'appelle lorsqu'on l'utilise.

Le noyau de vuex : 🎜🎜

• state🎜
• mutations🎜
• actions🎜
• getter🎜🎜🎜🎜🎜Utilisation de Vuex🎜🎜🎜🎜🎜Installer et utiliser vuex🎜🎜🎜🎜🎜Installer🎜🎜🎜🎜1. Installer dans le projet🎜rrreee🎜2. Créer une nouvelle boutique .js file🎜rrreee🎜🎜Utiliser data🎜🎜🎜🎜🎜Méthode 1 : Utilisez $store pour appeler🎜🎜🎜Utilisez this.$store.state directement dans le composant pour appelez data🎜 rrreee🎜🎜Méthode 2 : 🎜Importez mapState, développez le mappage des données dans le composant et devez l'écrire dans l'attribut calculé. Lorsque vous l'utilisez, écrivez simplement count directement🎜rrreee🎜🎜. Lorsque vous travaillez sur les données, les données d'état ne peuvent pas être appelées directement. Si vous souhaitez modifier les données, vous devez écrire des méthodes dans les mutations. Le but est de faciliter la recherche du problème🎜🎜🎜🎜Le rôle et l'utilisation des mutations🎜 🎜🎜🎜les mutations sont l'endroit où les méthodes d'exploitation des données sont écrites🎜rrreee🎜🎜Méthode d'utilisation 1 : 🎜🎜🎜déclenchez la fonction mutations, utilisez commit pour appeler le nom de la méthode à l'intérieur🎜🎜this.$store.commit C'est la première étape pour déclencher des mutations. D'une manière🎜rrreee🎜🎜les mutations peuvent transmettre deux paramètres dans la méthode de mutation, le premier est l'état et le second est la charge utile du paramètre personnalisé🎜rrreee. 🎜L'appel est dans la méthode du composant🎜rrreee🎜🎜 Utilisez la deuxième méthode🎜🎜🎜Importez la fonction mapMutations dans vuex dans le composant🎜🎜mapMutations(['sub']) consiste à mapper les méthodes à l'intérieur et les méthodes dans le magasin🎜🎜... Oui Opérateur d'expansion🎜rrreee🎜🎜Remarque🎜 : Vous ne pouvez pas écrire de code asynchrone dans la fonction Mutation, par exemple, si vous écrivez une fonction chronométrée, même si la page changera, l'état réel ; la valeur ne changera pas. Il y a donc des actions🎜🎜🎜Utilisation des actions🎜🎜🎜🎜L'action est utilisée pour gérer des tâches asynchrones. 🎜🎜Si vous modifiez des données via des opérations asynchrones, vous devez utiliser Action au lieu de Mutation. Cependant, vous devez toujours modifier les données indirectement en déclenchant Mutation en action. 🎜🎜Écrivez une action au même niveau que les mutations dans le magasin : { } dedans Appelez la méthode mutations à l'intérieur, puis déclenchez des actions dans le composant🎜rrreee🎜🎜Utilisez des actions🎜Pour utiliser la répartition dans le composant pour déclencher🎜rrreee🎜🎜les actions passent les paramètres🎜🎜🎜Dans les actions et les mutations du magasin, vous devez écrire des paramètres formels🎜 rrreee🎜Écrire les paramètres réels dans le composant🎜rrreee🎜🎜La seconde consiste à développer et map🎜Introduire mapActions🎜rrreee🎜🎜Remarque🎜 : Appelez la méthode actions dans le composant, utilisez commit dans les actions pour appeler les mutations method🎜🎜🎜getters🎜🎜🎜
  • Getter est utilisé pour traiter les données dans le Store afin de former de nouvelles données. Les données originales ne seront pas modifiées🎜
  • Getter peut traiter les données existantes dans le Store pour former de nouvelles données, similaires aux propriétés calculées de Vue. 🎜
  • Lorsque les données du Store changent, les données du Getter changeront également 🎜🎜rrreee🎜🎜La première méthode d'appel🎜 : this.$store.getters.Nom de la méthode🎜rrreee🎜🎜La deuxième méthode d'appel🎜. : Expansion du mappage, le mappage dans calculé🎜rrreee🎜🎜🎜Résumé🎜🎜🎜
    • state est utilisé pour stocker les données initiales et initialiser les données. Il est préférable de ne pas appeler l'état directement dans le. composant🎜
    • mutations contient des méthodes pour exploiter les données, mais les opérations asynchrones ne peuvent pas être effectuées🎜
    • actions contient des méthodes pour effectuer des opérations asynchrones🎜
    • getters est utilisé pour traiter les données dans le Store afin de former de nouvelles données🎜🎜🎜Recommandations associées : "🎜Tutoriel vue.js🎜"🎜

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!