Application du gestionnaire d'état dans VueX

Cet article vous présente l'application du gestionnaire d'état dans VueX. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

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组件为例)

L'utilisation de Vuex est également progressive. Vous pouvez commencer par le plus simple et l'utiliser au fur et à mesure que l'expérience et la technologie augmentent, puis. Améliorez progressivement son utilisation.Si l'utilisation de vuex est calculée en fonction des niveaux, vous pouvez commencer par le niveau t1 le plus basique. Commencez par résumer les trois premières versions les plus basiques, puis résumez les autres lorsque vous avez le temps.

Niveau T1

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>

Remarque : Si nous obtenons les données dans le composant home, elles peuvent être utilisées dans d'autres composants, mais Lorsque la page est actualisée, elle entrera dans la page d'accueil par défaut, ce qui équivaut à modifier les données, puis cliquer sur d'autres pages aura également des données. Si les données que nous obtenons dans le composant utilisateur doivent être utilisées dans le composant d'accueil, les données ne seront pas affichées lors de l'actualisation de la page, car il n'existe aucune méthode pour déclencher la modification des données dans le composant utilisateur à ce moment, donc les données sont vides. Lorsque l'on clique sur la page utilisateur, il y aura des données. À ce moment, cliquez sur la page d'accueil et nous pourrons voir les données obtenues à partir du composant utilisateur dans le composant d'accueil. La façon de résoudre ce problème est de sauvegarder les données localement ou de demander les données sur la page d'accueil

Niveau T2

lorsque la page est en cours de rendu dont nous avons besoin. pour obtenir les données via this.store.state. Cette façon d'écrire est trop longue et pas très bonne
Utilisez des attributs calculés combinés avec mapState pour résoudre ce problème

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>

Niveau T3

Niveau T3

Utiliser des constantes pour remplacer les types d'événements (état facile à visualiser et faciliter la maintenance)

    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)})
            }
        }

Articles connexes recommandés :

Processus de création du routage dynamique de contrôle des autorisations dans vue (image et texte)

Quelle est la différence entre la commande vue et $nextTick pour faire fonctionner le DOM ?

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!