So implementieren Sie globales Zustandsmanagement in Vuejs

Vuex kann verwendet werden, um eine globale Zustandsverwaltung in Vuejs zu erreichen. Vuex ist ein Zustandsverwaltungsmodell, das speziell für Vue.js-Anwendungen entwickelt wurde. Es kann zur Verwaltung globaler Daten und des Datenstatus komplexer Anwendungen verwendet werden, z. B. der Kommunikation zwischen Geschwisterkomponenten . Wertübergabe mehrschichtiger verschachtelter Komponenten usw.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

vuex globales Zustandsmanagement

Vuex ist ein 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里面是进行异步操作的方法
• gettersZustandsverwaltungsmuster
, das speziell für Vue.js-Anwendungen entwickelt wurde. Es kann den Datenstatus komplexer Anwendungen verwalten, z. B. die Kommunikation zwischen Geschwisterkomponenten, die Werteübertragung zwischen mehrschichtigen verschachtelten Komponenten usw.

Laienhaft ausgedrückt ist Vuex eine globale Datenverwaltung, die zur Verwaltung globaler Daten verwendet wird. Die ursprüngliche Datenverwaltung von Vue kann nur Daten zwischen übergeordneten und untergeordneten Komponenten übertragen, und es ist unpraktisch, globale Daten zu verwalten und alle Daten in Vuex zu speichern , wird bei Verwendung aufgerufen.

Der Kern von Vuex: 🎜🎜

• Zustand🎜
• Mutationen🎜
• Aktionen🎜
• Getter🎜🎜🎜🎜🎜Verwendung von Vuex🎜🎜🎜🎜🎜Vuex installieren und verwenden🎜🎜🎜🎜🎜Installieren🎜🎜🎜🎜1. Im Projekt installieren🎜rrreee🎜2. Einen neuen Store erstellen .js-Datei🎜rrreee🎜🎜Daten verwenden🎜🎜🎜🎜🎜Methode 1: Verwenden Sie $store zum Aufrufen🎜🎜🎜Verwenden Sie this.$store.state direkt in der Komponente, um Aufrufdaten🎜 rrreee🎜🎜Methode 2: 🎜MapState importieren, die Datenzuordnung in der Komponente erweitern und in das berechnete Attribut schreiben. Wenn Sie es verwenden, schreiben Sie einfach count direkt🎜rrreee🎜🎜 Bei der Bearbeitung der Daten können Zustandsdaten nicht direkt aufgerufen werden. Wenn Sie die Daten ändern möchten, müssen Sie Methoden im Mutationsstil schreiben. Der Zweck besteht darin, das Problem leichter zu finden ="font-size: 20px;">Die Rolle und Verwendung von Mutationen🎜 🎜🎜🎜Mutationen sind der Ort, an dem Methoden zum Bearbeiten von Daten geschrieben werden🎜rrreee🎜🎜Verwendungsmethode eins: 🎜🎜🎜Mutationsfunktion auslösen, Commit zum Aufrufen verwenden Methodenname im Inneren🎜🎜this.$store.commit Dies ist der erste Schritt zum Auslösen von Mutationen. Eine Möglichkeit🎜rrreee🎜🎜Mutationen können zwei Parameter in der Mutationsmethode übergeben. Der erste ist der Status und der zweite ist die benutzerdefinierte Parameternutzlast🎜rrreee 🎜Der Aufruf erfolgt in der Komponentenmethode🎜rrreee🎜🎜 Verwenden Sie Methode zwei🎜🎜🎜Importieren Sie die MapMutations-Funktion in Vuex in die Komponente🎜🎜mapMutations(['sub']) dient zum Zuordnen der darin enthaltenen Methoden und die Methoden im Store🎜🎜... Ja Erweitern Sie den Operator🎜rrreee🎜🎜Hinweis🎜: Sie können beispielsweise keinen asynchronen Code in der Mutation-Funktion schreiben, obwohl sich die Seite und der tatsächliche Status ändern Der Wert ändert sich nicht. Es gibt also Aktionen🎜🎜🎜Actions-Nutzung🎜🎜🎜🎜Action wird zur Bearbeitung asynchroner Aufgaben verwendet. 🎜🎜Wenn Sie Daten durch asynchrone Vorgänge ändern, müssen Sie Aktion anstelle von Mutation verwenden. Sie müssen die Daten jedoch immer noch indirekt ändern, indem Sie Mutation in Aktion auslösen. 🎜🎜Schreiben Sie eine Aktion auf derselben Ebene wie Mutationen im Speicher. } darin Rufen Sie die Mutationsmethode auf und lösen Sie dann Aktionen in der Komponente aus. 🎜rrreee🎜🎜Verwenden Sie Aktionen Schreiben Sie formale Parameter🎜 rrreee🎜Schreiben Sie tatsächliche Parameter in die Komponente🎜rrreee🎜🎜Die zweite besteht darin, zu erweitern und zuzuordnen🎜MapActions einzuführen🎜rrreee🎜🎜Hinweis🎜: Rufen Sie die Actions-Methode in der Komponente auf, verwenden Sie Commit in Actions, um die Mutationsmethode aufzurufen 🎜🎜🎜getters🎜🎜🎜
  • Getter wird verwendet, um die Daten im Store zu verarbeiten, um neue Daten zu bilden. Die Originaldaten werden nicht verändert🎜
  • Getter kann die vorhandenen Daten im Store verarbeiten, um neue Daten zu bilden, ähnlich den berechneten Eigenschaften von Vue. 🎜
  • Wenn sich die Daten im Store ändern, ändern sich auch die Daten im Getter 🎜🎜rrreee🎜🎜Die erste aufrufende Methode🎜: this.$store.getters.Method name🎜rrreee🎜🎜Die zweite aufrufende Methode🎜 : Mapping-Erweiterung, Mapping im berechneten🎜rrreee🎜🎜🎜Zusammenfassung🎜🎜🎜
    • state wird zum Speichern von Anfangsdaten und zum Initialisieren von Daten verwendet. Es ist am besten, den Status nicht direkt im aufzurufen Komponente🎜
    • mutations enthält Methoden zum Bearbeiten von Daten, aber asynchrone Operationen können nicht ausgeführt werden🎜
    • actions enthält Methoden zum Ausführen asynchroner Operationen🎜
    • getters wird verwendet, um die Daten im Store zu verarbeiten, um neue Daten zu bilden🎜🎜🎜Verwandte Empfehlungen: „🎜vue.js Tutorial🎜“🎜

Das obige ist der detaillierte Inhalt vonSo implementieren Sie globales Zustandsmanagement in Vuejs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!