Anwendung des State Managers in VueX

Dieser Artikel stellt Ihnen die Anwendung des State Managers in VueX vor. Er hat einen gewissen Referenzwert. Ich hoffe, er wird Ihnen hilfreich sein.

VueX State Manager

cnpm i vuex axios -S
1 创建Vuex 仓库
import Vue from 'vue'
import Vuex from 'vuex'
vue.use(Vuex)
const store = new VueX.store({
    state: {//存放状态}，
    mutations:{//唯一修改状态的地方，不在这里做逻辑处理}
})
export default store

2 在入口文件main.js下引入store
import store from './store/index.js'
将store 放到根实例里  以供全局使用
new Vue({
    el:'#app',
    store,
    components:{App},
    template:<App/>
})
开始使用store(以home组件为例)

Die Verwendung von Vuex ist auch progressiv. Sie können mit dem Einfachsten beginnen und es mit zunehmender Erfahrung und Fähigkeiten verwenden Progressive Verbesserung: Wenn die Verwendung von Vuex nach Ebenen berechnet wird, können Sie mit der grundlegendsten T1-Ebene beginnen, zuerst die ersten drei grundlegendsten Versionen zusammenfassen und dann die anderen zusammenfassen, wenn Sie Zeit haben.

T1-Ebene

1.
在hoome/script.js中进行请求数据
import Vue from 'vue'
import axios from 'axios'
export default {
    mounted(){
        axios.get('请求数据的接口')
        .then((res)=>{this.$store.commit('changeList',res.data)})
           //changeList相当于调用了在store.mutations中定义的修改状态的方法
                    //res.data  就是在改变状态时要修改的数据，需要在这传递过去。
        .catch((err)=>{console,log(err)})
        }
    }
2.
在store/index.js中定义
import Vue from 'vue'
import Vuex from 'vuex'
vue.use(Vuex)
const store = new VueX.store({
    state: {
        //存放状态
        list: [ ]     //存放一个空的数组
}，
    mutations:{
        //唯一修改状态的地方，不在这里做逻辑处理
        //定义一个修改list的方法
            //state 指上面存放list的对象，data 为在请求数据出传过来请求到的数据
        changeList (state，data) {
            state.list = data  //将请求来的数据赋值给list
      }
    }
   })
export default store

3.
在home/index.vue中渲染
<template>
    //渲染数据的时候通过this.store.state.list直接从store中取数据
    //还可以从其他组件通过这种方法去用这个数据无需重新获取
    <li v-for=&#39;item of this.store.state.list&#39; :key=&#39;item.id&#39;>{{item.name}}</li>
</template>

Hinweis: Wenn wir die Daten in der Home-Komponente erhalten, können sie in anderen Komponenten verwendet werden, aber wenn die Durch die Seitenaktualisierung wird standardmäßig die Startseite aufgerufen, was einer Änderung der Daten entspricht. Wenn Sie dann auf andere Seiten klicken, werden auch Daten angezeigt. Wenn die Daten, die wir in der Benutzerkomponente erhalten, in der Home-Komponente verwendet werden sollen, werden die Daten beim Aktualisieren der Seite nicht angezeigt, da zu diesem Zeitpunkt keine Methode zum Auslösen der Datenänderung in der Benutzerkomponente vorhanden ist Die Daten sind leer, wenn auf die Benutzerseite geklickt wird. Klicken Sie zu diesem Zeitpunkt auf die Startseite und wir können die von der Benutzerkomponente erhaltenen Daten in der Startseite sehen. Die Möglichkeit, dieses Problem zu lösen, besteht darin, die Daten lokal zu speichern oder die Daten auf der Homepage

T2-Ebene

anzufordern, wenn die Seite gerendert wird um die Daten über this.store.state abzurufen, ist zu lang und nicht sehr gut
Verwenden Sie berechnete Attribute in Kombination mit mapState, um dieses Problem zu lösen

1
在home/script.js中进行操作
import Vue from 'vue'
import mapState from 'vuex'
import axios from 'axios'
export default {
    computed:{
        //mapState为辅助函数
        ...mapState(['list'])
    },
    mounted(){
        axios.get('请求数据的接口')
        .then((res)=>{this.$store.commit('changeList',res.data)})
        .catch((err)=>{console,log(err)})
        }
    }

2
在home/index.vue中渲染
<template>
    <li v-for=&#39;item of  list&#39; :key=&#39;item.id&#39;>{{item.name}}</li>
</template>

T3-Ebene

Verwenden Sie Konstanten, um Ereignistypen zu ersetzen (einfache Anzeige von Status und Wartung)

    1
    在store下创建mutation-type.js
    export const  CHANGE_LIST = 'CHANGE_LIST'
    
    2
    在store/index.js引入mutation-type.js
    import Vue from 'vue'
    import Vuex from 'vuex'
    import {CHANGE_LIST }  from‘./mutation-type.js’
    vue.use(Vuex)
    const store = new VueX.store({
        state: {
            list: [ ]     //存放一个空的数组
    }，
        mutations:{
        //我们可以使用Es6风格的计算属性命名功能来使用一个常量作为函数名
            [CHANGE_LIST] (state，data) {
                state.list = data  //将请求来的数据赋值给list
          }
        }
       })
    export default store
    
    3
    在home/script.js中进行引入
    import Vue from 'vue'
    import mapState from 'vuex'
    import axios from 'axios'
    import {CHANGE_LIST} from ‘../../store/mutation-type.js’
    export default {
        computed:{
            //mapState为辅助函数
            ...mapState(['list'])
        },
        mounted(){
            axios.get('请求数据的接口')
            .then((res)=>{this.$store.commit(CHANGE_LIST,res.data)})
            .catch((err)=>{console,log(err)})
            }
        }

Empfehlungen für verwandte Artikel:

Berechtigungen in vue Steuern Sie den Erstellungsprozess des dynamischen Routings (Bild und Text)

Was ist der Unterschied zwischen dem Vue-Befehl und $nextTick, um DOM zu bedienen?

Das obige ist der detaillierte Inhalt vonAnwendung des State Managers in VueX. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!