Heim > Artikel > Web-Frontend > 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
ist ein Vuex
是一个专为Vue.js
应用程序开发的状态管理模式。可以管理复杂应用的数据状态,比如兄弟组件的通信、多层嵌套的组件的传值等等。
通俗的来说vuex就是全局数据管理,用来管理全局数据的,vue原本的数据管理只能父子组件之间传递数据,并且不方便,使用vuex可以进行全局数据管理,将所有数据存储到vuex中,使用时调用。
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
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
是存放初始数据,进行数据初始化的,最好不要在组件里直接调用statemutations
里面是存储对数据进行操作的方法,但是不能进行异步操作actions
里面是进行异步操作的方法getters
ZustandsverwaltungsmusterVue.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: 🎜🎜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🎜🎜🎜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!