VueX状况管理器

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

Vuex的运用也是一种渐进式的，你可以从最简朴的最先运用，依据履历和手艺的增添，再渐进加强对它的运用，假如根据级别算vuex的运用可以从最基本的t1级别最先，先总结最基本的前三个版本，后续有时间再总结其他的。

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='item of this.store.state.list' :key='item.id'>{{item.name}}</li>
</template>

注重点：
（
假如我们在home组件中猎取的数据，可以在其他组件中运用，然则是当页面革新默许进入home页，也就是相当于修正了数据，再点击其他页面也能有数据。假如我们在user组件中猎取的数据要在home组件中运用，当页面革新数据是不会显现的，由于此时还没有触发user组件中的变动数据的要领，所以数据为空，当点击user页面时，就会有数据，这个时刻再去点击home页面我们就可以看到在home 组件中运用user组件中猎取的数据了。处理这类题目的方法可以将数据存到当地一份或许都在首页举行要求数据
）

T2级别

在页面举行衬着的时刻我们须要经由过程this.store.state去拿数据，如许的写法太长而且不太好
用盘算属性连系mapState去处理这个题目
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='item of  list' :key='item.id'>{{item.name}}</li>
</template>

T3级别

  运用常量去替代事宜范例(便于检察状况，利于保护)
    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)})
            }
        }